background image with width=100%

[John]

Hi

I have an HTML image whichwill stretch the width of the screen. No
problems.
<img src="castle.jpg" width="100%">

However, I now want to make it a background image using CSS. There is no
'width' attribute for a background image.
The following does not work.

body.blueberry {background-image: url(castle.jpg);
background-attachment: fixed; background-position: bottom center;
background-repeat: no-repeat;}
img.blueberry {width:100%}

Is there anyway of stretching the background image as in the HTML img
construct?

Regards
John

 

[iwasjoeking]

Hi John,

I don't think it is possible to alter the background image display
dimensions with CSS.

One option is that you can make the alter image's dimensions to the
desired height and width in an image editing program before you use it.

Here is a good reference on CSS backgrounds:
http://www.w3.org/TR/CSS21/colors.html

 

[dorayme]

Hi

I have an HTML image whichwill stretch the width of the screen. No
problems.
<img src="castle.jpg" width="100%">

However, I now want to make it a background image using CSS.
Is there anyway of stretching the background image as in the HTML img
construct?

Not in the straightforward way you can with <img..> in the
foreground with almost any pic. With background, you can give the
illusion with some pics by use of repeat in the horiz direction.
But they have to be special pics that seem just wider when
repeated. There are better examples than a plain blue sky! A
while back Morgenstein or someone from Germany (he rides motor
bikes) posted one of his efforts that looked quite good. (Where
the hell is he, I am fed up of people leaving)

 

[John]

Thanks guys

I'll just have to re-jig the bottom of each page. Perhaps a background
image in bottom right and an <img> with width=100% underneath. The width
will then satisfy those who have a diffrent screen resolutions to what I
expect.

Regards
John