[css-d] Issue with background images on small devices
Hi all, I have a question regarding background images. My background image on a wrapper div is shown perfectly behind some absolute-positioned divs (text) as I expect, normally. Problem is when I zoom out the window of the browser to a size smaller than the background image and then scroll down: the background image is not shown anymore in the area which exceeded the size of the zoomed window. This is not that bad, because no one zoomes out the window on a big screen normally, but the same happens on a smartphone with small screens: when the user scrolls, the background image is not shown in the scrolled area. Heres the site: http://www.goeldi.eu/abusart/ Can anybody tell me the reason and how to avoid this behaviour? Thanks in advance! -Peter __ css-discuss [css-d@lists.css-discuss.org] 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/
[css-d] Issue with background images on small devices
Hi all, I have a question regarding background images. My background image on a wrapper div is shown perfectly behind some absolute-positioned divs (text) as I expect, normally. Problem is when I zoom out the window of the browser to a size smaller than the background image and then scroll down: the background image is not shown anymore in the area which exceeded the size of the zoomed window. This is not that bad, because no one zoomes out the window on a big screen normally, but the same happens on a smartphone with small screens: when the user scrolls, the background image is not shown in the scrolled area. Heres the site: http://www.goeldi.eu/abusart/ Can anybody tell me the reason and how to avoid this behaviour? Thanks in advance! -Peter __ css-discuss [css-d@lists.css-discuss.org] 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] Issue with background images on small devices
On 20.06.2011 11:00, Göldi wrote:
Heres the site: http://www.goeldi.eu/abusart/
Can anybody tell me the reason and how to avoid this behaviour?
Reason: the various, stacked, elements don't relate to each other, and
therefore don't adjust dimensions to each other. Natural fallback is
body-width in browser-window, which causes the effect you're seeing with
the element holding the background not being wider than the browser-window.
For that specific case/page you may get away with setting a specific
width on relevant elements, for instance...
#wraponcircle, #wrap {1130px;}
...but it would all be so much easier if you avoided reliance on
absolute positioning and made sure all containers actually contained
their intended content.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
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] Issue with background images on small devices
thanks for your answer, George!
I know absolute positioning is maybe not best practise but often i'm
also running into problems when using floating for doing
several-columns layouts. And so i do now as well:
I reangearred my site http://www.goeldi.eu/abusart without absolute
positioning, and I have the same problem with my background-image:
it's cut off on the right side when the browser window is too small
and I scroll to the right. I do not understand why this happens.
So still something wrong?
At least the image is shown at its full extension in vertical direction...
Cheers
-Peter
2011/6/20 "G.Sørtun" :
> On 20.06.2011 11:00, Göldi wrote:
>>
>> Heres the site: http://www.goeldi.eu/abusart/
>>
>> Can anybody tell me the reason and how to avoid this behaviour?
>
> Reason: the various, stacked, elements don't relate to each other, and
> therefore don't adjust dimensions to each other. Natural fallback is
> body-width in browser-window, which causes the effect you're seeing with the
> element holding the background not being wider than the browser-window.
>
> For that specific case/page you may get away with setting a specific width
> on relevant elements, for instance...
>
> #wraponcircle, #wrap {1130px;}
>
> ...but it would all be so much easier if you avoided reliance on absolute
> positioning and made sure all containers actually contained their intended
> content.
>
> regards
> Georg
>
>
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> 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/
>
__
css-discuss [css-d@lists.css-discuss.org]
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] Issue with background images on small devices
> I reangearred my site http://www.goeldi.eu/abusart without absolute > positioning, and I have the same problem with my background-image: > it's cut off on the right side when the browser window is too small > and I scroll to the right. I do not understand why this happens. > > So still something wrong? Yes... The width with your background image is 100% (of the window), while your text is 745px. If 100% of the window is smaller than 745px, then the background image stops at 100%, and the text keeps going. You could set your container to have a min-width of 775px. Or (the better option, imo) you could rework your page so that the content is more flexible (take off the width and the height, and use a titled background image, perhaps). ---Tim __ css-discuss [css-d@lists.css-discuss.org] 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] Issue with background images on small devices
ok, that helps! rework with tiled image: i don't like the background image too much, but it's part of the clients art... thanks a lot! -Peter 2011/6/20 Tim Climis : >> I reangearred my site http://www.goeldi.eu/abusart without absolute >> positioning, and I have the same problem with my background-image: >> it's cut off on the right side when the browser window is too small >> and I scroll to the right. I do not understand why this happens. >> >> So still something wrong? > > Yes... The width with your background image is 100% (of the window), > while your text is 745px. If 100% of the window is smaller than > 745px, then the background image stops at 100%, and the text keeps > going. > > You could set your container to have a min-width of 775px. Or (the > better option, imo) you could rework your page so that the content is > more flexible (take off the width and the height, and use a titled > background image, perhaps). > > ---Tim > > __ css-discuss [css-d@lists.css-discuss.org] 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/
