How to stretch a background (!) image horizontally (only) ?
Susanne Grabe
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
dorayme
<4b9c8079$0$6985$9b4e...@newsspool4.arcor-online.net>,
sgr...@inf.uni-karlsruhe.com (Susanne Grabe) wrote:
By not having it as a background image and instead using the img
element and specifying 100% width and height. The alternative is
to make a background image that looks good when repeated
horizontally. Here are some I made for some purpose or other a
while back:
<http://netweaver.com.au/infiniteWideBackground/>
Narrow and widen the browser window to see how it functions
--
dorayme
Jukka K. Korpela
> 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/
Roy A.
To have an background image to stretch you have to use an SVG-image.
That doesn't work in the two most used browsers, Internet Explorer and
Firefox.
Thomas 'PointedEars' Lahn
> To have an background image to stretch you have to use an SVG-image.
> That doesn't work in the two most used browsers, Internet Explorer and
> Firefox.
Just to be sure that there is no misunderstanding: What do you mean by that?
PointedEars
Thomas 'PointedEars' Lahn
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.
PointedEars
Thomas 'PointedEars' Lahn
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
Roy A.
wrote:
SVG-images as background images stretches with the container. SVG-
images as background images isn't supported by all browsers.
Thomas 'PointedEars' Lahn
> Thomas 'PointedEars' Lahn wrote:
>> Roy A. wrote:
>> > To have an background image to stretch you have to use an SVG-image.
>> > That doesn't work in the two most used browsers, Internet Explorer and
>> > Firefox.
>>
>> Just to be sure that there is no misunderstanding: What do you mean by
>> that?
>
> SVG-images as background images stretches with the container.
How did you get that idea?
> SVG-images as background images isn't supported by all browsers.
True. Iceweasel/Firefox 3.5.8 does not support it, so I presume all Mozilla
1.9.1.8-based don't. Then again, SVG _documents_ are not really images.
PointedEars
Gus Richter
> 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.
<https://developer.mozilla.org/en/CSS/Scaling_background_images>
Note that -moz-background-size, -webkit-background-size, and
-o-background-size are the experimental properties used in Gecko, WebKit
(Safari and Google Chrome, for example), and Opera. Experimental because
"CSS Backgrounds and Borders Module Level 3" has not yet achieved
Recommendation status and is therefore not finalized.
--
Gus
Roy A.
wrote:
> Roy A. wrote:
> > Thomas 'PointedEars' Lahn wrote:
> >> Roy A. wrote:
> >> > To have an background image to stretch you have to use an SVG-image.
> >> > That doesn't work in the two most used browsers, Internet Explorer and
> >> > Firefox.
>
> >> Just to be sure that there is no misunderstanding: What do you mean by
> >> that?
>
> > SVG-images as background images stretches with the container.
>
> How did you get that idea?
By testing. Webkit and Opera does that if the SVG dosn't constrain the
height and width. In the SVG file you could set the height to e.g.
300px and width to 100%, In that way you could have an background
image that only stretches horizontally.
> > SVG-images as background images isn't supported by all browsers.
>
> True. Iceweasel/Firefox 3.5.8 does not support it, so I presume all Mozilla
> 1.9.1.8-based don't. Then again, SVG _documents_ are not really images.
If SVG aren't images, what are they then? Aren't JPG, GIF and PNG
_files_ images too?
Ben C
> On 14 Mar, 16:36, Thomas 'PointedEars' Lahn <PointedE...@web.de>
> wrote:
>> Roy A. wrote:
>> > Thomas 'PointedEars' Lahn wrote:
>> >> Roy A. wrote:
>> >> > To have an background image to stretch you have to use an SVG-image.
>> >> > That doesn't work in the two most used browsers, Internet Explorer and
>> >> > Firefox.
>>
>> >> Just to be sure that there is no misunderstanding: What do you mean by
>> >> that?
>>
>> > SVG-images as background images stretches with the container.
>>
>> How did you get that idea?
>
> By testing. Webkit and Opera does that if the SVG dosn't constrain the
> height and width. In the SVG file you could set the height to e.g.
> 300px and width to 100%, In that way you could have an background
> image that only stretches horizontally.
Interesting. I wonder if this is specified anywhere, although it's the
obvious thing for browsers to do.
SVG images of course scale well too, so this actually works, although
you might still want to preserve their aspect ratio (which you can do
with the preserveAspectRatio attribute on the SVG root element).
>> > SVG-images as background images isn't supported by all browsers.
>>
>> True. Iceweasel/Firefox 3.5.8 does not support it, so I presume all Mozilla
>> 1.9.1.8-based don't. Then again, SVG _documents_ are not really images.
>
> If SVG aren't images, what are they then? Aren't JPG, GIF and PNG
> _files_ images too?
Well SVG files can either be replaced elements as can JPG, GIF and PNG
images, or they can be treated like documents whose DOM trees you can
get at with JavaScript etc. This is the distinction really.
Roy A.
> On 2010-03-14, Roy A. <royarnes...@gmail.com> wrote:
>
>
>
>
>
> > On 14 Mar, 16:36, Thomas 'PointedEars' Lahn <PointedE...@web.de>
> > wrote:
> >> Roy A. wrote:
> >> > Thomas 'PointedEars' Lahn wrote:
> >> >> Roy A. wrote:
> >> >> > To have an background image to stretch you have to use an SVG-image.
> >> >> > That doesn't work in the two most used browsers, Internet Explorer and
> >> >> > Firefox.
>
> >> >> Just to be sure that there is no misunderstanding: What do you mean by
> >> >> that?
>
> >> > SVG-images as background images stretches with the container.
>
> >> How did you get that idea?
>
> > By testing. Webkit and Opera does that if the SVG dosn't constrain the
> > height and width. In the SVG file you could set the height to e.g.
> > 300px and width to 100%, In that way you could have an background
> > image that only stretches horizontally.
>
> Interesting. I wonder if this is specified anywhere, although it's the
> obvious thing for browsers to do.
Yes. What will happen if the intrinsic dimensions is not fixed is
specified in CSS 2.1:
<http://www.w3.org/TR/CSS2/colors.html#propdef-background-image>
"Intrinsic dimensions expressed as percentages must be resolved
relative to the dimensions of the rectangle that establishes the
coordinate system for the 'background-position' property."
or if intrinsic dimensions are not specified:
"If the image has no intrinsic ratio either, then the dimensions must
be assumed to be the rectangle that establishes the coordinate system
for the 'background-position' property."
This also would be what happens if you use the initial value (auto) of
the experimental property -prefix-background-size.
dorayme
<4b9c8079$0$6985$9b4e...@newsspool4.arcor-online.net>,
sgr...@inf.uni-karlsruhe.com (Susanne Grabe) wrote:
The only two reasonably reliable ways I know are to use an img
element in the HTML and specify 100% width or to carefully choose
or make a background that repeats nicely in the horizontal
direction.
http://netweaver.com.au/infiniteWideBackground/
--
dorayme
dorayme
dorayme <dor...@optusnet.com.au> wrote:
> The only two reasonably reliable ways I know are
repeat posts, confusion with settings on new laptop and should be
for ciwas or alt.html anyway.
--
dorayme
dorayme
<4b9c8079$0$6985$9b4e...@newsspool4.arcor-online.net>,
sgr...@inf.uni-karlsruhe.com (Susanne Grabe) wrote:
The only two reasonably reliable ways I know are to use an img
Ben C
I see, thanks for that.
So what's happening is the browser sets the intrinsic width of the image
to the container, and width=100% on the SVG root element then fits the
image into that width.
> or if intrinsic dimensions are not specified:
>
> "If the image has no intrinsic ratio either, then the dimensions must
> be assumed to be the rectangle that establishes the coordinate system
> for the 'background-position' property."
>
> This also would be what happens if you use the initial value (auto) of
> the experimental property -prefix-background-size.
If people are going to go around scaling images, it's much better that
they use SVG anyway.
Roy A.
>
> BODY.test { font-weight: bold; font-size: 14px; font-family: Arial, Geneva; background-image: url(images/myback.jpg); }
Why don't you just say: "font-family: sans-serift"? The only reason to
specify Arial is to make sure that your page don't look better in
other browsers than your beloved one.