Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Background Display Issue in Browser Window

Posted by: mario Mar 28 2012, 11:10 AM

Hey there, I've been working on a website http://m.navmana.com . 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

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 !!

Posted by: pandy Mar 28 2012, 05:19 PM

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

QUOTE(mario @ Mar 28 2012, 06:10 PM)

also tried adding,

CODE

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?

Posted by: Frederiek Mar 29 2012, 02:11 AM

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

Posted by: pandy Mar 29 2012, 06:04 AM

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.

Posted by: Frederiek Mar 29 2012, 07:06 AM

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.

Posted by: pandy Mar 29 2012, 07:47 AM

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).

Posted by: Christian J Mar 29 2012, 08:21 AM

QUOTE(pandy @ Mar 29 2012, 12:19 AM)

Never seen that before. What browser is using it?

It's for mobile browsers: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Posted by: mario Mar 29 2012, 04:02 PM

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

Posted by: pandy Mar 29 2012, 04:54 PM

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

Posted by: Frederiek Mar 30 2012, 02:16 AM

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?

Posted by: mario Mar 30 2012, 09:04 AM

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.