background image – overflow puzzle

[shavenraver]

Hi,

http://www.paulstroudmusic.co.uk/BASE/index.html

If you take a look at the page above you’ll see that the 1010px wide image sits 15% from the left of its container div. If the page width is less than this no scroll bars appear – and this is what I want.

However, if you narrow the browser window to less than the box under the word “TEST”, then scroll right, you’ll see that the upper background image doesn’t continue

After much experimentation and hunting around for an answer, I’m hoping one of you might throw some light on the problem

Thanks

[shavenraver]

Sorry – have this too :)

Markup









 




 


 




















TEST

CSS



* {

margin: 0;

padding: 0;

}

body {

font: 14px/1.4 Georgia, serif;

background-color:black;



}

article, aside, figure, footer, header, nav, section {

display: block;

}



nav {

color:white;

text-align:center;

font-size:100px;

}

#page-wrap {

margin: 50px auto;

background-color:black;

}

#theHeader{

}

#fullHeader {

position:relative;

/*background:url(../images/header-bg.jpg);*/

background-color:#C93;

height:400px;

overflow:hidden;

}





#centerHeaderBg	{

height:400px;

background:url(../images/header-main-bg.jpg);

background-repeat:repeat-x;

background-position:top;

position:absolute;

left:15%;

margin:auto;

min-width:1010px;

min-height:50%;



}

[noahgelman]

I’m confused as to what is even the matter. No ones browser window is only going to be a couple hundred wide. No one will ever run into this problem.

[chrisburton]

Are you talking about the tan or black?

p.s. I’m pretty sure you can condense half of your divs

[shavenraver]

The black. The tan area will be a repeated background image – it’s tan for illustration purposes.

re:ps -Yeah – theHeader is certainly surplus. But there is stuff in the markup I’ve deliberately taken out of the CSS.

@noahgelman – You’re right but that box under “TEST” could be closer to a 980px blog post when I’m done with the rest of the page.

Also, on a zoomed-in browser the “cut-off” is perhaps worse.

I just feel that I’ve gone about this all wrong

[shavenraver]

Thanks wolfcry – that works fine. It would be nice to get it “right” though. I don’t have a problem with starting again with this.

Could someone be kind enough to suggest a better way to construct this?

[shavenraver]

Yeah – it seems fine. May be I should just leave it like this and move on.

The reason for the 15% is that there are other elements that have different relationships with the wrap div.

Thanks very much for your time.

[Author]

Posts