Hi- I am trying to make the header picture extend continuously across the page (left to right). I don’t want the image to stop. Do I have to change the page background to make it appear with the header image to create this effect? I would like it to be seamless with the background. The header has a background color do I need to change the color to add the image or something. I am a newbie with CSS coding. so if you could please explain clearly that would be awesome.
Right now it’s set to:
[COLOR=“Blue”] #header {
background: #301801 url(images/header_bg.gif) repeat-x left bottom;
}
.header-helper-container {
background: url(images/header.jpg) no-repeat left top;
}
.header-helper-container, .top-tools-container, .content-tools, #content, #footer {
width: 1000px;
margin: 0 auto;
padding: 0;
}
.container-right .central-column, .container-left .central-column {
width: 775px;[/COLOR]
[quote name=‘almondjjoy’]Do I have to change the page background to make it appear with the header image to create this effect?[/quote]
That would be the easiest way to do that. Otherwise as the #header div is inside the #container div, you would have to move it outside of the #container div; and that is not so easy to make the design again to be centered.
Then the body background in your css file shoul be something like that:
body {
background:url("images/your_bg_image.jpg") repeat-x scroll left top #ffffff;
}
Hi- Thank you for your response. How do I change the background to a photo instead of it currently only displaying a color?
Regards
Almond~
It worked!