W3C home > Mailing lists > Public > www-style@w3.org > April 2006

Re: background technique

From: Emrah BASKAYA <emrahbaskaya@hesido.com>
Date: Thu, 6 Apr 2006 09:06:39 +0300 (EEST)
Message-ID: <1130.85.104.38.16.1144303599.squirrel@eposta.hesido.com>
To: "Ubik Marek" <yewbic@gmail.com>
Cc: www-style@w3.org

Can't say I have fully understood you, but did you have a look at media
queries:
http://www.w3.org/TR/css3-mediaqueries/#device-width
Using this, one can send narrow width capable user agents a different
image, and with a combination of multiple background images you could
perhaps achieve your goal? (Perhaps a test case page could also help
visualize the problem, if anybody else would be interested)

Yours,
Emrah Baskaya,
http://www.hesido.com


> Hello Good Day.
>
> I've recently noticed that the only way to have a long-in-width body
> background image to be clipped at both sides(left and right) at low
> resolutions and still visible at high resolutions(assuming it is
> horizontally centered) is to, infact, make a very-long-in-width image with
> what I assume would be a blank center. This approach is not very good for
> bandwidth and download times for those with slow connections to the
> internet. I attempted to apply some custom techniques to try and emulate
> this, with no luck though.
>
> I cut the big image into 3 pieces, the left edge, the right edge and I
> threw
> the center blank away. I then tried something like having two div
> containers
> on each side of the page and putting the left and right images in their
> containers with negative positions to go off the screen at resolutions
> like
> 800x600 but visible at 1024x768 and above. But the problem here is that:
> while the negative positioned image on the left works perfect, its the
> right
> side image that creates a horizontal scrollbar when positioned negative
> off
> the screen.. Why only the right side and not the left side? Perhaps you
> could remove the horizontal-scrollbar effect from images that have been
> deliberately positioned negative off the screen?(in this case just the
> right
> side because the left side already works)
>
> I took another approach, I then applied the images as backgrounds to the
> containers and background-positioned the images negatively again out of
> the
> container.. I figured I could get the Background image to flow out of the
> container when I used overflow:visible, but it seems that this does not
> apply to background images. Perhaps you could have the bg also apply to
> overflow:visible? or make something like overflow-bg:visible?
>
> After this did not work, I went back to the first attempt and tried
> applying
> overflow:none to the body.. and it looks as though it would be perfect if
> something like "overflow-x:none" existed. This would actually be useful in
> many occasions, maybe you could look into something like "overflow-x and
> overflow-y" ?
>
> I have looked at the new recommendations for CSS3 and the multilayered
> background images... but I dont think this will solve the problem Im
> having.. because I'm not sure then if it will be possible to have the
> background images offscreen at 800x600 resolution but still visible to
> higher resolutions, since the position of 0, 0 will be at the corner of
> the
> page and any negative positions would also be negative at high
> resolutions...
>
> Keep in mind this technique is to save download times and if I did not
> care
> about my audience this much I would just use the full-size 760px width
> image
> for my background. On another note, a slim image in height with a
> "repeat-y"
> will not solve my problem either as my designs are rather complex.. and
> besides "cliché" is not my style  ;)
>
> I hope you will consider some of my recommendations.
>
Received on Thursday, 6 April 2006 06:06:46 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:44 GMT