...

View Full Version : tiling a background image in a div



rqdavis
12-14-2007, 04:26 PM
I am trying to add a tiled background to the space beneath my left navigation bar so that it will expand to fill the space no matter the length of the page. The css I am using for the div tag is:

#bgBox{
border: none;
background-color: #676f60;
background-image:url(Images/glossyback5.gif);
background-repeat: repeat;
padding: 20px
padding-left: 180 px
}

I can see the tiled background behind my image when I look at it in design view in Dreamweaver, but it does not display in any browser, nor does it expand to fill the space. I am new to doing layout with CSS, so it's very possible the answer is an obvious one that I'm just not getting. Any help would be appreciated!

Here's the link to my template page: http://www.cape.k12.me.us/tml/homepage/template.html

Thanks!

Rachel

ahallicks
12-14-2007, 04:39 PM
Just so you know, that id can be shortened to read:



#bgBox{
border: none;
background: #676f60 url(Images/glossyback5.gif) repeat;
padding: 20px
padding-left: 180 px
}


To get the background to repeat the height of your page you will need to set the height of the div to 100% and all of it's parent elements height to 100% too. Without setting a hieght it will only repeat as far as the content that expands the div as divs take up all the width by default, but only the height of the content within

Papa
12-14-2007, 04:41 PM
Add the code below, if you want to to "tile" across the div. Should repeat on x and y axis.


background-repeat: repeat;

ahallicks
12-14-2007, 04:42 PM
Add the code below, if you want to to "tile" across the div. Should repeat on x and y axis.


background-repeat: repeat

She was already using that, but it would only repeat as far as the div stretched in height and width... see post above as to why your method would change nothing

Papa
12-14-2007, 04:47 PM
Opps... sorry I jumped the gun

rqdavis
12-14-2007, 09:44 PM
Thanks. I've set the div height to 100% in that div and the ones in which it is contained, but no luck. I must be missing something!

Rachel

effpeetee
12-15-2007, 02:22 PM
There are 22 markup errors on the page.
There are 14 css errors.

W3 validator.

Frank

rqdavis
12-15-2007, 06:20 PM
Thanks, Frank. I had no idea there was a tool out there that would pinpoint coding errors like that. I now have a Valid XHTML 1.0 Strict page! My gradient background now shows up, but my div does not expand to fill 100% of the length of the page. I think it must be a CSS error. Any ideas?

Rachel

Apostropartheid
12-15-2007, 06:23 PM
http://nopeople.com/CSS/full-height-layout/

Majoracle
12-15-2007, 11:31 PM
You can't get a div's height to match that of another. Unless you give it a specific height in pixels, it's only going to span the height of the content in it.

This should help.

Put a wrap around the sidebar and main. So the layout is built basically like this:

<div id="container">

<div id="header">Header Content</div>
<div class="subheader">Subheader Content</div>
<div id="wrap">
<div id="sidebar">Sidebar Content</div>
<div id="main">Main Content</div>
</div>
<div id="footer">Footer Content</div>

</div>

Add this to your CSS:

#wrap {
background: #FFF url(Images/glossyback5.gif) repeat-y;
width: 779px;
/* add any other propertied you may want */
}
#wrap:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
* html #wrap {
height:1&#37;;
}

The #wrap:after and * html #wrap bits are only necessary if the sidebar and/or main divs have float properties. Hope it does what you want. I haven't tested with IDs, only the clearfix technique. Should work though..

rqdavis
12-18-2007, 06:38 PM
Thanks so much--that did the trick! I'm very grateful!

Rachel



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum