Re: [css-d] overflow bg image

[Philippe Wittenbergh]

On Jun 12, 2008, at 1:21 AM, Matt Tibbits wrote:

> Yes, it should. In FF though, if the content doesn't go all the way  
> to the
> bottom of the window, it interprets bottom right as being the bottom  
> right
> of the content INSTEAD of the bottom right of the browser window...
>>
>> body {background: #ccc url(../path/to/image.png) no-repeat 100% 100%
>> fixed;}
>> out to do just that.

A fixed positioned image is always placed in reference to the  
*viewport* (that is: the window). The code given works perfectly fine  
in Gecko 1.8 and Gecko 1.9 (Fx 2 and Fx3 rc), Opera, WebKit (Safari) -  
and IE 6, IE 7 [1].

The code above would fail, however, if you also put a background on  
the root element ().

If what you actually want is:put the image at the bottom of the window  
if there is not much content, but at the bottom of the content if it  
overflows the window (long page), then Georg's solution of using min- 
height is the way to go.

[1] little demos



Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] overflow bg image

[Matt Tibbits]

If you compare how it looks in IE and FF you should see what I mean. Adding
the styles you recommended: 

html{height:100%;margin:0;padding:0;}

...fixed the problem at the bottom of the screen, but introduced a new
behaviour at the top. It's hard to explain but basically if I resize the
browser window height (using IE7) the bg image stops moving when that image
reaches the top of the view port. 

If I use FF and resize vertically it will continue moving the bg image up
even AFTER the top of the bg image reaches the top of the view port.

I'm not sure if I made any sense or not, but by comparing in the two
browsers you should see what I mean. If this is just how FF behaves then
I'll accept that as an answer and move on...

Thanks,

Matt

> 
> I'm not sure what you mean when you say it doesn't "stop when it
> reaches
> the TOP of the view port." You have the image set not to repeat. If you
> want it to stay in place, adding fixed to the rules for the background
> image would do that, right?
> 
> It's hard to see exactly what the problem is. I'm 78% colorblind, so I
> can only barely see the image in the background to begin with.
> 
> --Bill
> 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] overflow bg image

[Matt Tibbits]

Yes, that is exactly it... little tricky but that does the job. 

Thank you, for your help.
 
Matt
 
> If this is more like what you want...
> 
> 
> 
> ...try introducing the style changes / additions I've used...
> 
> 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] overflow bg image

[Gunlaug Sørtun]

Matt Tibbits wrote:
> In FF though, if the content doesn't go all the way to the bottom of 
> the window, it interprets bottom right as being the bottom right of 
> the content INSTEAD of the bottom right of the browser window...

If this is more like what you want...



...try introducing the style changes / additions I've used...



regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] overflow bg image

[Bill Brown]

Matt Tibbits wrote:
> Yes, it should. In FF though, if the content doesn't go all the way to the
> bottom of the window, it interprets bottom right as being the bottom right
> of the content INSTEAD of the bottom right of the browser window...
> 
>> Not sure if I understand what you want. The background-image should
>> always be at the bottom right corner of the window ? No matter how
>> much content or how tall the window is?
>>
>> body {background: #ccc url(../path/to/image.png) no-repeat 100% 100%
>> fixed;}
>> out to do just that.

Actually, it wouldn't. You're running XHTML Strict. In Strict mode, the
body sizes differently, hence the need for the 100% on the html element.

I'm not sure what you mean when you say it doesn't "stop when it reaches
the TOP of the view port." You have the image set not to repeat. If you
want it to stay in place, adding fixed to the rules for the background
image would do that, right?

It's hard to see exactly what the problem is. I'm 78% colorblind, so I
can only barely see the image in the background to begin with.

--Bill
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] overflow bg image

[Matt Tibbits]

Yes, it should. In FF though, if the content doesn't go all the way to the
bottom of the window, it interprets bottom right as being the bottom right
of the content INSTEAD of the bottom right of the browser window...

> 
> Not sure if I understand what you want. The background-image should
> always be at the bottom right corner of the window ? No matter how
> much content or how tall the window is?
> 
> body {background: #ccc url(../path/to/image.png) no-repeat 100% 100%
> fixed;}
> out to do just that.
> 
> Philippe

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] overflow bg image

[Philippe Wittenbergh]

On Jun 11, 2008, at 9:06 AM, Matt Tibbits wrote:

> Probably an easy fix but I'm not sure how to do it:
>
>
>
> I have a bg image on a   tag that is positioned bottom, right.  
> In IE7
> the bg image is actually stuck to the bottom right of the viewing  
> port, but
> in FF the bottom, right of the content or body tag.
>
>
>
> You can view this at http://www.tchh.org/new/

Not sure if I understand what you want. The background-image should  
always be at the bottom right corner of the window ? No matter how  
much content or how tall the window is?

body {background: #ccc url(../path/to/image.png) no-repeat 100% 100%  
fixed;}
out to do just that.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] overflow bg image

[Matt Tibbits]

Almost, although now the bg image will not stop when it reaches the TOP of
the view port in FF. It keeps being pushed up as the window is resized...

Matt
 

> 
> Hi Matt,
> 
> This should help:
> html{height:100%;margin:0;padding:0;}
> 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] overflow bg image

[Bill Brown]

Matt Tibbits wrote:
> I have a bg image on a   tag that is positioned bottom, right. In IE7
> the bg image is actually stuck to the bottom right of the viewing port, but
> in FF the bottom, right of the content or body tag. 
> 
> You can view this at http://www.tchh.org/new/

Hi Matt,

This should help:
html{height:100%;margin:0;padding:0;}

Good luck,
Bill Brown
TheHolierGrail.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/