Background Display Issue in Browser Window Options

[mario]

Hey there, I've been working on a website My Webpage . It was going fine till i realized that if i make thew browser window smaller and scroll to the right a white band is appearing over the background image. I've tried adding:

CODE

html,body{ width: 100%;    height: 100%;    margin: 0px;    padding: 0px;    overflow-x: hidden; }

the result was not successful .
also tried adding,

CODE

<meta name = "viewport" content = "width = 1000">

in the mark up, didn't really fix anything. i'm not sure what i'm doing wrong.
please help guys !
ur assistance will greatly be appreciated.
cheers !!

[pandy]

What browser do you see the white band in? I don't see it in the ones I tried.

also tried adding,

CODE

<meta name = "viewport" content = "width = 1000">

in the mark up, didn't really fix anything. i'm not sure what i'm doing wrong.
please help guys !
ur assistance will greatly be appreciated.
cheers !!

Never seen that before. What browser is using it?

[Frederiek]

Resize your browser window and scroll to the right. The background stops at the size of the viewport.

[pandy]

Oh that! I was looking for a band across the blue.

Well, the header has no width and adapts to the initial viewport. Other stuff on the page has a fixed width in pixels and sticks out. Make the header as wide as the rest.

[Frederiek]

I'm afraid that's not it. Set any width to the header on his site and see what happens.

I'd make the background image (blueBg.png) as high as needed (500px) and apply it to BODY with repeat-x only.

[pandy]

Strange. Works for me. But I see now that the rest of the page is centered, so doing this doesn't have the desired effect, the header doesn't align with the rest of the page. What about doing what Frederiek suggested and use the background with BODY and then then give the header the same width as the rest and center it? That way the header will be aligned with the rest of the page and the background will stretch all the way to the left and right (which I think is what you want).

[Christian J]

Never seen that before. What browser is using it?

It's for mobile browsers: http://www.quirksmode.org/blog/archives/20...ining_meta.html

[mario]

Well, just as Frederiek suggested I had previously done exactly that. creating the Bg to the full height of the band applying it to the body tag and repeat-x also i would add background-possition:top;
But the issue remains that this is just a patch up solution to this problem. especially when we have multiple bands that exceed on both ends for example, this particular site also has a band for the footer which also displays the white patch when scrolled to the right.
I've faced this issue many times in the past and it's really been scrambling my brain and i was hoping to figure out a more permanent solution to this problem.
**also is this method of segmenting the background color with css unusual for webdesigners? cos i haven't been able to find a direct solution to this on google either.
p.s.. thanks guys for the responses!
cheers

[pandy]

I don't see what's patchy about it.

[Frederiek]

Setting a width to #header doesn't make sense. It's only used as a hook-up for a structure à la HTML5 (e.g. header, section, footer). Inside each there's a .container div that has a width and is centered with margin.

Can you post the url of a test page with an attempt of my suggestion?

[mario]

Alright guys, the solution was quite silly as I had anticipated. I looked up min-width and max-width in css and applied it.

CODE

#header {
    height: 500px;
    min-width: 960px;
    max-width: 3000px;
    background-image:url(/blueBg.png);
    background-repeat: repeat;
}

}
#footer {
    height: 300px;
    min-width: 960px;
    max-width: 3000px;
    background-image:url(/darkBg.png);
    background-repeat: repeat;
}

On incorporating this min/max-width css rule i was able to overcome the issue that the browser viewport was creating.
thanks for all the support u guys...
I hope this can be of help to some other troubled mind facing the same issue.