Full width background?

by 3 replies
4
Hey Everyone!

I am working on a project and I would like to have the background extended right the way to the edge of the screen.

All of the items of the site are contained within the "container" ID and I have created a new ID called "top-background"

The CSS specs are the following:

#container {
margin:0 auto;
max-width:960px;
padding:0px 25px;
overflow:visible;
}

#top-background {
margin:0 auto;
width:1366px;
text-align:center;
background-color:red;
}


Now when I edit the PHP code to add my "top-background" ID, if I place it before (above) the "container" ID, the background stretches to the edge of the screen perfectly. Sadly when I add it inside the "container" ID it only covers the width of the container, I need to place it here so it sits behind the logo, navbar... Any ideas on how I can override the container settings so it stretches correctly and everything stays in the centre of the page?

Thanks in advance,

Joe Crosbie
#website design #background #full #width
  • What's the URL for the site?
  • You will need to put the bigger one first if you want the smaller one to center inside it.
    If it's not necessary to keep the smaller one at a maximum of 960px, just make it bigger to cover the area you want. But it's hard to get a real idea of the problem without a link to the page in question.
  • Lets see what you have going on and I can try to help

Next Topics on Trending Feed