Forums
This topic is locked
How to get background image to fill screen?
11 Oct 2007 11:31:29 q z posted:
Good morning all,Would one of you nice chaps/chapesses with far greater exp with FW and DW MX than I have be able to answer me a quick couple of Qs please?
1. I rather fancy a nice gentle gradient fill background on my site and I've figured out how to create it in FW, I've also figured out how to swizzle it round to get the darker bit at the top and the lighter bit at the bottom (using linear option), I've also figured out that I need to save it as a jpeg and not a gif if I don't want stripey lines, and I've also figured out how to get it into DW and showing live! : www.aircraft-deliveries.com/background.html (just using the "default" image straight out of FW for the mo)
However, what I can't figure out is how to turn it into a background, ie. it goes right to the edges of my pages and not act as an image, as such.
2. It might just be my VDU, but even though I've saved it as a jpeg, it's still looking a bit uneven and stripey here. Anything I can easily do to smooth that out?
3. You will have noticed that the image linked above is like 18 foot wide... This isn't the intention but I'm a bit lost with how best to manage this. I've been reading that the way to sort background images out in order for them to fill the page is to "tile" them using a 'repeat' function. However, surely if I did that (using a much smaller image of course), all I would get is a page full of that image repeatedly in a "tiled" effect, therefore no longer maintainting the smooth fade from the dark to light down the page?
Look forward to your comments & advice.
Thanks!
Rob
Replies
Replied 15 Oct 2007 13:33:31
15 Oct 2007 13:33:31 Alan C replied:
Hi,
make your image only a few pixels wide and as tall as you want your page to be, then set it as a background on your page using a stylesheet, something like this . . .
<pre id=code><font face=courier size=2 id=code>
body {
background: url("your_background_image.jpg"
background-repeat: repeat-x;
}
}</font id=code></pre id=code>
that came from here
www.w3.org/TR/CSS21/colors.html
doing it that way you only have to have a very small image file and the stylesheet will tile it all the way across the page no matter how big or small it is
if the image is on good try saving it at a better quality - say about 60% in jpeg, that should make it smoother
make your image only a few pixels wide and as tall as you want your page to be, then set it as a background on your page using a stylesheet, something like this . . .
<pre id=code><font face=courier size=2 id=code>
body {
background: url("your_background_image.jpg"
background-repeat: repeat-x;
}
}</font id=code></pre id=code>
that came from here
www.w3.org/TR/CSS21/colors.html
doing it that way you only have to have a very small image file and the stylesheet will tile it all the way across the page no matter how big or small it is
if the image is on good try saving it at a better quality - say about 60% in jpeg, that should make it smoother