The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Background Display Issue in Browser Window
mario
post 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. ninja.gif
please help guys !
ur assistance will greatly be appreciated.
cheers !!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 28 2012, 05:19 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,623
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.

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

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. ninja.gif
please help guys !
ur assistance will greatly be appreciated.
cheers !!


Never seen that before. What browser is using it?


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 29 2012, 02:11 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 4,500
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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 29 2012, 06:04 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,623
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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 29 2012, 07:06 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 4,500
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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 29 2012, 07:47 AM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,623
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).


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 29 2012, 08:21 AM
Post #7


.
********

Group: WDG Moderators
Posts: 6,239
Joined: 10-August 06
Member No.: 7



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/20...ining_meta.html


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mario
post 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 smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 29 2012, 04:54 PM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,623
Joined: 9-August 06
Member No.: 6



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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 30 2012, 02:16 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 4,500
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?


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mario
post 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... biggrin.gif
I hope this can be of help to some other troubled mind facing the same issue.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th November 2014 - 11:13 AM