Forum Moderators: not2easy
I'm pretty new to css but would like to know how to approach having a background image on the 'browser-page' which is behind the page we make with all the writing and normal stuff of a webpage.
I want to put one at the top, so it sticks out either side of the page, and another different one at the bottom, and inbetween will just be normal, plain background.
I've seen this done and it is so cool. The ordinary page, expanded and contracted as I made my browser wider and narrower, but the image just stayed where it was so it was 'fixed'.
Can anyone tell me roughly how we go about doing this please?
Also, just want to say that I have only just found this forum but it looks very interesting! :) Thanks.
I suggest using two wrappers around your content: one with the top image and one with the bottom. Assuming you want the images to be the page's width, I created the following code:
CSS -
body {
margin: 0;
padding: 0;
background-color: #FFF; /* optional */
}
#wraptop {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: url('your_top_image_src.gif') top left no-repeat;
}
#wrapbot {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: url('your_bottom_image_src.gif') bottom left no-repeat;
}
HTML -
<body>
<div id="wraptop">
<div id="wrapbot">
ALL OTHER DIVISIONS/CONTENT
<br style="clear: both"> <!-- saftey measure -->
</div> <!-- end wrapbot -->
</div> <!-- end wraptop -->
If you do not want the wrappers to go the width of the page, pick what works for you. If you want the images centered rather than aligned left, change top left to top center and bottom left to bottom center. And while you could add a background color to either the body or warptop, you cannot have a background color in the wrapbot. Just an FYI.
You other option is put the top image as the background for the body and the bottom image in an outer wrapper as I mentioned.
Hope this helps.
Marshall
Many thanks.
