Page 1 of 1
Making picture.jpg fit screen
Posted: Fri 17 Dec 2010 5:43 pm
by 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
Re: Making picture.jpg fit screen
Posted: Fri 17 Dec 2010 7:18 pm
by werribee_au
Is this the sort of thing you want to do?
Re: Making picture.jpg fit screen
Posted: Fri 17 Dec 2010 7:48 pm
by 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
Re: Making picture.jpg fit screen
Posted: Fri 17 Dec 2010 8:04 pm
by 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.
Re: Making picture.jpg fit screen
Posted: Sat 18 Dec 2010 12:34 am
by 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.
Re: Making picture.jpg fit screen
Posted: Sat 18 Dec 2010 1:48 am
by 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.
Re: Making picture.jpg fit screen
Posted: Sat 18 Dec 2010 11:08 am
by 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?
Re: Making picture.jpg fit screen
Posted: Sat 18 Dec 2010 11:17 am
by steve
CSS 2 doesn't allow for a background image to be stretched to fill the screen, but CSS 3 will have this.
Re: Making picture.jpg fit screen
Posted: Sat 18 Dec 2010 11:33 am
by 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
Re: Making picture.jpg fit screen
Posted: Sat 18 Dec 2010 7:33 pm
by 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.