I'm not 100% sure whether this is HTML/CSS or Javascript... So i'm sorry in advanced... I have just purchased 2 images (headers) One is a image which I plan to have at the top of my page in the center Second is a 'buffer image' which I plan to have beside that image -filling the screen until 100% is filled... -So it looks like one image along the whole screen/header... But I have no idea how do to this? Can someone please explain (Or point to a tutorial?) Thanks alot... James
that's html/css. you can put the 'buffer image' in the body and the other one in a div for your css: body{ background-image:url('...'); /*url of the buffer image*/ margin:0px; } #header{ margin:auto; background-image:url('...');/*url of the secondimage*/ width:200px; /*width of the second image in pixels*/ height:50px; /*height of the second image in pixels*/ } Code (markup): and your html code: <html> <head> </head> <body> <div id="header"></div> </body> </html> Code (markup):
Ok thats great thanks... but... I dont want the whole background as the buffer image just the whole header you get me... So lets say this line is the header: ---------------------------------------------- (say thats like 1024 pixels which fills browser's width, and 100 pixels height -which doesnt fill browsers height, -just abit (the header)) the buffer image would buffer the left side, then the second image will fill its area, and the buff image would buffer the right side again... -Not below or above or the background etc. Do you know how to do that?
body{ background-image:url('...') repeat-x; /*url of the buffer image with just repeat in x direction*/ margin:0px; } #header{ margin:auto; background-image:url('...');/*url of the secondimage*/ width:200px; /*width of the second image in pixels*/ height:50px; /*height of the second image in pixels*/ } Code (markup):
It doesn't work: It loops the WHOLE background... can someone fix this? URL of code above: www.zombiewrath.com/testlogo.html Code: <style type="text/css"> <!-- body{ background-image:url('buffer.jpg'); repeat-x; /*url of the buffer image with just repeat in x direction*/ margin:0px; } #header{ margin:auto; background-image:url('main.jpg');/*url of the secondimage*/ width:800px; /*width of the second image in pixels*/ height:56px; /*height of the second image in pixels*/ } --> </style> <html> <head> </head> <body> <div id="header"></div> </body> </html>
And with css3 you can have a background with multiple images: body { background: url('buffer.jpg') top repeat-x, url(main.jpg) top center no-repeat; } Code (markup): But it's not compatible with every browsers...