Making picture.jpg fit screen

[Steve Willington]

I'd like to use my own picture as a back ground. That has not proved a problem but what I'd like is to use it like a water mark that fits the whole screen. Any ideas?

Steve.
www.rockbeareweather.co.uk

[werribee_au]

Is this the sort of thing you want to do?

[Steve Willington]

Yes, exactly and then to use that in the style sheet as a back ground, one that fills the screen, rather than the lower LH quarter.

Steve.
www.rockbeareweather.co.uk

[werribee_au]

I can help you with the image and maybe someone else can help you with the css (I don't want to give you a bum steer )

You can use a photo editor like the free paint.NET program
http://www.dotpdn.com/files/Paint.NET.3.5.6.Install.zip

load the image and then select Adjustments, Hue/Saturation and adjust the lightness.

[sanramonrover]

In case no one else chimes in, here's what I did:
after making the picture as transparent as you want, store it in the images folder in Cumulus.

Save your picture as picture.jpg which will overwrite the original. OR name your picture whatever you want -(eg mypicture.jpg) and save it in the images folder.
Then find the weatherstyle.css file - should be in webfiles folder.

See the first paragraph headed "body" - it says
background-image: url(images/picture.jpg);
THEN change the above line to:
background-image: url(images/mypicture.jpg);

That should work.

[beteljuice]

"Choose an image that fills the screen ....."

How big is a screen ?
OK, there is some fancy code you could write to find out and re-size the graphic buts that's OTT.

If it is really is only just obseverable (watermark), than change the weatherstyle.css backgoround properties:

Code: Select all

body {
	background-color: #FFFFFF;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 10pt;
	color: #585858;
	text-align: left;
	background-attachment: fixed;
	background-image: url(images/picture.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
}

Simply remove:
background-repeat: no-repeat;
or more correctly change it to:
background-repeat: repeat;

Then the image will be 'tiled' all over the visible screen.

[Steve Willington]

Hi All,

Thanks for the help. I did get as far as tiling the image, and it didn't look too bad, but I would prefer for it to be centred and for it to adjust to the screen size so as to fill it. A bit like a table when you give it a width in percent, 80% always being 80% of the available screen size. Or is that not possible in the case of a background image?

[steve]

CSS 2 doesn't allow for a background image to be stretched to fill the screen, but CSS 3 will have this.

[bnwrx]

This may work for you:
background-attachment: fixed;
background-image: url(images/picture.jpg) ;
background-repeat: no-repeat;
background-position:top;

It works for me with this: http://woodlandweather.net/yesterday.htm

[Steve Willington]

Thanks all. I gone with background position; top and made the image larger (1280x) so that it fits most screens. It doesn't change size with screen resolution but it looks OK. Now I just need a decent picture.