PDA

View Full Version : CSS Background Doesnt repeat - URGENT


neuro
05-13-2007, 08:37 AM
Preview on IE:
http://img511.imageshack.us/img511/4910/ielk3.th.jpg (http://img511.imageshack.us/my.php?image=ielk3.jpg)

Privew on Firefox:
http://img511.imageshack.us/img511/9449/firefoxpp2.th.jpg (http://img511.imageshack.us/my.php?image=firefoxpp2.jpg)

CSS code


#background {
width: 734px;
height: auto;
background-image: url(../images/bg.png);
margin-left: auto;
margin-right: auto;
background-repeat: repeat-y;
}

#maincenter {
width: 662px;
height: auto;
background-image: url(../images/main_bg.png);
background-repeat: repeat-y;
}


These 2 codes suppose to look the background image.. IE shows how it supposed to be.. while the firefox preview you can see that the background doesnt repeat.

Anyone can assist me on this one... thx in advance.

chriskq
05-13-2007, 11:18 AM
ur css isnt really valid i dont think
use this instead

background-image: url(../images/bg.png) repeat-y 0 0;

neuro
05-13-2007, 01:11 PM
k.. i tried ur suggestion and still got the same thing for firefox browser.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cinematography</title>
<!-- **** layout stylesheet **** -->
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>
<body>
<!-- **** background container **** -->
<div id="background">
<!-- **** banner container **** -->
<div id="banner">
</div>
<!-- **** spacer container **** -->
<div id="spacer">
</div>
<!-- **** main container **** -->
<div id="main">
<!-- **** sub main container - top area **** -->
<div id="maintop">
</div>
<!-- **** sub main container - center area **** -->
<div id="maincenter">
<!-- **** left content container **** -->
<div id="left">
<!-- **** left content container - title area **** -->
<div id="leftcontent">
<h1>CINEMATOGRAPHY</h1>
<span class="center"><img src="images/cinematography.jpg" alt="cinematography"/></span>
<p align="justify">Picture composition is the break down of a picture into the foreground, middle ground and background. in all forms of photography and art, composition is critical in producing an interesting and well defined, result in spite of instinct, placing the subject always in the dead center of the picture can be just that.
Good composition is usually thought of in terms of an imaginary grid dividing up the picture plane, the picture plane is the actual space in which the image exists, variety is important in all aspects of creating good video and varying distance is no exception ,a video shot entirely from one distance, that is, the distance between the camera and the subject never varies ,would be unendurable dull , by choosing the distance of your shoot you establish and control the impact of the video..</p>
<p>There are four principle distance techniques:</p>
<ul>
<li><b>The wide shoot:</b> establishes the subject and location of the action, it is usually used at the beginning of a video or scene since it establishes the setting.</li>
<li><b>The medium shot:</b> clarifies the subject or action give the viewer more informat ion about the subject and clarifies the theme of video.</li>
<li><b>The medium close up:</b> provides even more detail for the viewer type of scene, the background has receded and the person or group of people being video taped fill out the entire scene.</li>
<li><b>The close up:</b> zeros in on a single object, someone face detail of experience and feeling maybe conveyed in a close up.</li>
</ul>
<p></p>
<!-- **** Display Images Class Center **** -->
<span class="center">
<img src="images/wideshoot.jpg" alt="wide shoot"/>
</span>
<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="129">&nbsp;</td>
<td width="211"><div align="center">Wide Shoot</div></td>
<td width="76">&nbsp;</td>
<td width="43">&nbsp;</td>
</tr>
</table>
<p></p>
<!-- **** Display Images Class Center **** -->
<span class="center">
<img src="images/closeup.jpg" alt="close up"/>
<img src="images/medium.jpg" alt="medium close up"/>
<img src="images/mediumshoot.jpg" alt="medium shot"/>
</span>
<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="14">&nbsp;</td>
<td width="165"><div align="center">Close Up</div></td>
<td width="95"><div align="center">Medium Close Up</div></td>
<td width="176"><div align="center">Medium Shot</div></td>
</tr>
</table>
<p></p>
</div>
</div>
<!-- **** right content container **** -->
<div id="right">
<!-- **** right content container - title area **** -->
<div id="rightcontent">
<h1>Menu</h1>
<ul>
<li><a href="index.html">Cinematography</a></li>
<li><a href="camera.html">Camera</a></li>
<li><a href="sound.html">Sound</a></li>
<li><a href="editing.html">Editing</a></li>
<li><a href="lighting.html">Lighting</a></li>
<li><a href="credit.html">Credit</a></li>
</ul>
</div>
</div>
</div>
<!-- **** sub main container - bottom area **** -->
<div id="mainbottom">
</div>
</div>
<!-- **** footer container **** -->
<div id="footer">
</div>
</div>
</body>
</html>


css.css

/* Global Style */
html
{ height: 100%;
}
body
{ font-family: verdana, arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: .68em;
background: #1e0001;
color: #70695A;
}
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.2em;
}
h1
{
font-family: arial, sans-serif;
letter-spacing: .30em;
background: transparent;
color: #999999;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
h2
{ margin: 0px;
padding: 0px 0px 4px 0px;
font-size: 100%;
}
/* Global Image Settings */
img
{ border: 0px;
}
/* Global Hyperlink Settings */
a
{ outline: none;
}
/* image positioning - left, right and center */
.left
{ float: left;
padding: 0px 8px 0px 0px;
}
.right
{ float: right;
padding: 0px 0px 0px 8px;
}
.center
{ display: block;
text-align: center;
margin: 0 auto;
margin-bottom: 10px
}
/* Global Font Style Settings */
.style1 {
color: #999999
}
.style2 {
color: #333333
}
/* Global Unordered List */
ul
{ margin: 8px 0px 0px 16px;
padding: 0px;
}
ul li
{ list-style-type: square;
margin: 0px 0px 11px 0px;
padding: 0px;
}
ul li a {
color: #70695A;
font-size: 0.85em;
text-decoration: none;
}
ul li a:hover {
color: #FFFFFF;
font-size: 0.85em;
text-decoration: none;
}
/* Background */
#background {
width: 734px;
height: auto;
background-image: url(../images/bg.png);
margin-left: auto;
margin-right: auto;
background-repeat: repeat-y;
}
/* Banner container */
#banner {
width: 662px;
height: 125px;
background-image: url(../images/banner.png);
margin-left: 36px;
margin-right: 36px;
}
/* Spacer between banner and content */
#spacer {
width: 662px;
height: 10px;
margin-left: 36px;
margin-right: 36px;
}
/* Main content container */
#main {
width: 662px;
margin-left: 36px;
margin-right: 36px;
}
#maintop {
width: 662px;
height: 10px;
background-image: url(../images/topmain.png);
}
#maincenter {
width: 662px;
height: auto;
background-image: url(../images/main_bg.png);
background-repeat: repeat-y;
}
#mainbottom {
width: 662px;
height: 10px;
background-image: url(../images/bottommain.png);
}
/* Main content - Left container */
#left {
width: 465px;
height: auto;
float: left;
}
#leftcontent {
width: 455px;
height: auto;
padding-left: 10px;
}
#leftcontent h1 {
font-size: 100%;
text-transform: uppercase;
font-weight: normal;
background-image: url(../images/line1.jpg);
background-repeat: no-repeat;
background-position: bottom;
}
/* Main content - Right container */
#right{
width: 180px;
height: auto;
float: right;
}
#rightcontent {
width: 170px;
height: auto;
padding-right: 10px;
}
#rightcontent h1 {
font-size: 100%;
text-transform: uppercase;
font-weight: normal;
background-image: url(../images/line2.jpg);
background-repeat: no-repeat;
background-position: bottom;
}
/* Footer container */
#footer {
width: 734px;
height: 114px;
background-image: url(../images/footer.png);
}


Those are the coding for my css file and the index.html file maybe can help to solve this problem.

any other suggestion? thx.

chriskq
05-14-2007, 10:07 AM
show me the page online somwhere pls

neuro
05-14-2007, 11:27 AM
the link:

http://www.mbtcentral.net/Testing/

Thx :)

domedia
05-14-2007, 12:36 PM
You are not clearing your floats before showing your footer:

#footer {clear: both;}

neuro
05-14-2007, 01:02 PM
hm.. this if my footer css code

#footer {
width: 734px;
height: 114px;
background-image: url(../images/footer.png);
}

so u wan me add

clear: both;

correct me if i'm wrong

domedia
05-14-2007, 01:43 PM
Just try it and see what happens, you can't be afraid to dive into code view ;)

neuro
05-14-2007, 03:18 PM
k.. i add the code to the css

it fix part of the error in firefox.

Remember at the first post i said i got 2 background


#background {
width: 734px;
height: auto;
background-image: url(../images/bg.png);
margin-left: auto;
margin-right: auto;
background-repeat: repeat-y;
}

#maincenter {
width: 662px;
height: auto;
background-image: url(../images/main_bg.png);
background-repeat: repeat-y;
}


and if u see at the screenshot both backgrounds do not loop. after i add the code "bg.png" loop nicely, but the black background ("main_bg.png") still have problem.

thx for the first solution :) so any suggestion for "main_bg" problem?

domedia
05-14-2007, 06:58 PM
I tested the code I gave you above, and it fixed all your background problems.
The url you gave above still does not have my fix in it.

neuro
05-15-2007, 04:34 AM
arg... i didn't know there will be different between the one that i upload on the internet and the one that i host on my local server.

its fixed, but dunno why if test the web localally 1 background still doesnt loop.

anyway thanks everyone :)

chriskq
05-15-2007, 06:48 AM
page is looking good.
i especially like how the footer background fades out

davidj
05-15-2007, 08:32 AM
its a nice site although think it could do with a bling banner which would shout what the site is about

neuro
05-15-2007, 09:56 AM
Hehehe thanks guys..

actually created this website for a friend of mine.. its a chance for me to learn CSS as well.

again.. without the help from u guys i cant finsih it on time.

Yo... david hehe.