Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
Hello.
I have a background image repeating across the browser declared in the body tag.
I also need to repeat a background image on top of that vertically within a wrapper div. however, setting height at 100% is getting me nowhere.
advice on how to acomplish this?
here is the page (with no wrapper bg showing up of course - it only shows where there is content inserted, and never 100%) - http://test1.figure3a.com/index2.html
here is the code (not much...)
CSS
html, body
{
background: #fbfaf6;
font: normal 11px Helvetica, Trebuchet MS, Trebuchet, Verdana, Arial;
color: #333;
margin: 0;
padding: 0;
background-image: url(/img/bg.jpg);
background-repeat: repeat-x;
height: 100%;
}
body>#wrapper{height:auto;}
#wrapper
{
background: #fbfaf6;
width: 850px;
height: 100%;
background-image: url(/img/bg_wrapper.jpg);
}
CODE
<body>
<div id="wrapper">
</div>
</body>
and here is the desired result - http://test1.figure3a.com/img/ss_01.jpg
thanks much. -
There is nothing in your wrapper. Once your fill it with content, it will being to show.
height: 100%; really doesn't do much. -
You can give html and body different backgrounds. So this means that if you place your green background on the html, you can place your black vertically repeated background on the body positioned centre.
However, I'd separate your header image from your background, you can use it as the background to either your h1, or a new header div.
Just my opinion, someone else might have different suggestions.
Incidentally, what were you going to do once your content exceeded 700px in height? It's easy to do, and it looks like you would have had your header re-appearing every so often....
1 to 3 of 3