Background Display Issue in Browser Window |
Background Display Issue in Browser Window |
mario |
Mar 28 2012, 11:10 AM
Post
#1
|
Group: Members Posts: 4 Joined: 28-March 12 Member No.: 16,812 |
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 |
Mar 28 2012, 05:19 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Mar 29 2012, 02:11 AM
Post
#3
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Resize your browser window and scroll to the right. The background stops at the size of the viewport.
|
pandy |
Mar 29 2012, 06:04 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Mar 29 2012, 07:06 AM
Post
#5
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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 |
Mar 29 2012, 07:47 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Mar 29 2012, 08:21 AM
Post
#7
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
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 |
Mar 29 2012, 04:02 PM
Post
#8
|
Group: Members Posts: 4 Joined: 28-March 12 Member No.: 16,812 |
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 |
Mar 29 2012, 04:54 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I don't see what's patchy about it.
|
Frederiek |
Mar 30 2012, 02:16 AM
Post
#10
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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 |
Mar 30 2012, 09:04 AM
Post
#11
|
Group: Members Posts: 4 Joined: 28-March 12 Member No.: 16,812 |
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. |
Lo-Fi Version | Time is now: 19th April 2024 - 09:13 AM |