How to stretch a background (!) image horizontally (only) ?
in [CSS]
|
Prev: How (the heck) do you center a Web page in IE8 (for the umpteenthtime)?
Next: How to repeat a background image on the left side and another on the right side of a web page?
From: Susanne Grabe on 14 Mar 2010 01:21 Currently I have defined a background image for a web page in CSS like: BODY.test { font-weight: bold; font-size: 14px; font-family: Arial, Geneva; background-image: url(images/myback.jpg); } and in html: <BODY class="test"> .... </BODY> So how can I stretch this background image horizontally (=not vertically) to the full width of the browser? Susanne
From: Jukka K. Korpela on 14 Mar 2010 04:31 Susanne Grabe wrote: > Currently I have defined a background image for a web page in CSS > like: > > BODY.test { font-weight: bold; font-size: 14px; font-family: Arial, > Geneva; background-image: url(images/myback.jpg); } As usual, a URL have been worth 1,000 words (actually more). It is unclear what you are really trying to accomplish. Setting font size to a px value is alarming (and a bad idea), and if you suggest Arial and Geneva as alternatives, what makes you think Arial should be favored when both are available? > So how can I stretch this background image horizontally (=not > vertically) to the full width of the browser? You can't stretch it all, when using it as a background image in the CSS (and HTML) sense. You can "fake" background images using content images and positioning. This is briefly described and illustrated on the demo page http://www.cs.tut.fi/~jkorpela/www/stretched-bg.html It uses proportional scaling for the image. It is difficult to imagine why you would want to use non-proportional scaling, i.e. scale horizontally while keeping height fixed - but it's technically an easy modification: just set the height to the actual height of the image (or some other fixed value, as you like). It does not do any good to photos, for example, see http://www.cs.tut.fi/~jkorpela/www/stretched-bg-h.html Whether this all makes sense is a different issue. As a rule, anything that "forces" you to bold copy text tends to be a bad idea. Background images tend to cause distraction and make text much less legible. * * * When you crosspost, you should a) mention that you have set followups b) set followups to the most relevant group. (Better still, don't crosspost, just send to the right group.) I have overruled your tacit Followup-To setting, posting this message to both groups and setting followups to c.i.w.a.stylesheets. Clearly this is CSS rather than HTML, as even your first statement indicates. -- Yucca, http://www.cs.tut.fi/~jkorpela/
From: Hans-Georg Michna on 14 Mar 2010 07:42 On Sun, 14 Mar 2010 10:31:27 +0200, Jukka K. Korpela wrote: >Setting font size to a px value is alarming (and a bad idea) Why is that? px is the only measure which (counter-intuitively), at least according to the standard, adjusts for actual physical resolution, while all other measures are absolute. But even if that does not work, why is px not a good measure? Hans-Georg
From: Thomas 'PointedEars' Lahn on 14 Mar 2010 08:26 Susanne Grabe wrote: > Currently I have defined a background image for a web page in CSS like: > > BODY.test { font-weight: bold; font-size: 14px; font-family: Arial, > Geneva; background-image: url(images/myback.jpg); } > > and in html: > > <BODY class="test"> > ... > </BODY> > > So how can I stretch this background image horizontally (=not vertically) > to the full width of the browser? It is unlikely that you can at the moment. This feature is specified per the `background-size' property in the current CSS3 Background and Borders draft, and I have not heard of an implementation of it. Solutions involving the `img' element ignore the specifics of that element. Please set your Followup-To to .stylesheets, not .html, if your question is mostly concerned with CSS. Better yet, do not crosspost, and post only in ..stylesheets in the first place. Thank you in advance. PointedEars
From: Roy A. on 14 Mar 2010 08:48
On 14 Mar, 13:26, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> wrote: > Susanne Grabe wrote: > > Currently I have defined a background image for a web page in CSS like: > > > BODY.test { font-weight: bold; font-size: 14px; font-family: Arial, > > Geneva; background-image: url(images/myback.jpg); } > > > and in html: > > > <BODY class="test"> > > ... > > </BODY> > > > So how can I stretch this background image horizontally (=not vertically) > > to the full width of the browser? > > It is unlikely that you can at the moment. This feature is specified per > the `background-size' property in the current CSS3 Background and Borders > draft, and I have not heard of an implementation of it. Webkit (at least in Chronium 5.0) supports 'background-size', Opera don't support it, but uses '-o-background-size' in previous verson (10.10). I don't know about 10.5. > Solutions involving the `img' element ignore the specifics of that element. True. |