Sat, 2010-03-13 23:50
Hi, I've finally decided to give CSS a try, and am rebuilding my personal website. Right away however I've hit a snag. I have a background image which is wider than most browser windows, and set so that it is centred and tiles vertically.
On top of the background I have another image which I want to use as a masthead, aligned so that it is centred (thus matching the background image in alignment), but is always set to the top of the page and without tiling. Eventually I'll be adding in a menu on top of this.
I managed to figure out that having two background images is possible, but I didn't find a way to allow the background to tile, without the masthead doing the same.
Previously I had tried using the masthead in a div tag, but the image wouldn't go all the way to the browser edges like I need it to.
Any help would be greatly appreciated!
body { background-image: url(images/bg1.png); background-repeat:repeat-y; background-position:center; } body { background-image: url(images/bg.jpg); background-repeat:no-repeat; background-position:center top; height: 486px; }
Sun, 2010-03-14 01:01
#1
It'd be nice to get a print
It'd be nice to get a print screen as a visual. But just guessing at what you want, how does this look?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Full Width Banner</title> <style type="text/css"> body { background: URL('http://www.mcculloughdesigns.com/forums/fullbanner/steelbg.jpg'); padding: 0; margin: 0; text-align: center;} #banner{ width: 100%; height: 100px; background: URL('http://www.mcculloughdesigns.com/forums/fullbanner/bgtexture.jpg'); color: #FFFFFF} #content{ margin: 0px auto; background-color: #FF0000; width: 800px; height: 500px;} </style> </head> <body> <div id="banner">Place your banner / "masthead" image here.</div> <div id="content">This is where your page content will begin.</div> </body> </html>
Sun, 2010-03-14 03:59
#2
Or give one to html { } and
Or give one to html { } and one to body { }
Sun, 2010-03-14 10:08
#3
Thanks for the replies and
Thanks for the replies and for the help. I've taken josephbm91's advice and applied it to what I'm haphazardly trying to do, with one issue perhaps pointing to my going about matters the wrong way.
Below is a screen shot of where I'm at. My homepage relates to my family tree..
The background file is 2400px wide x 1px high. It's centered and has colours to match the basic scheme of the header image, which is 2400px wide x 486px high.
My problem is that whilst Joseph's suggestion worked great, the content text should start from just below the corners of the header image shown in the screenshot, rather than immediately below the header as is currently the situation. How do I get that red box to move upward?
Sun, 2010-03-14 14:59
#4
two things come to mind. you
two things come to mind. you could split the header image and place the bottom part of it on the content section, or you could move the content up with either a negative top margin or using relative positioning.
Sun, 2010-03-14 18:10
#5
Or you can try something
Or you can try something like...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Full Width Banner</title> <style type="text/css"> html, body { margin: 0; padding: 0; } html { background: url(tiled_bg.jpg) repeat left top; } body { background: url(masthead.jpg) no-repeat center top; color: #FFFFFF; padding: 175px 0 25px; } #content { margin: 0 auto; background-color: #FF0000; width: 780px; padding: 10px; } </style> </head> <body> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html>