Picture Size as Background in FP2003 (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message


goanna -> Picture Size as Background in FP2003 (6/30/2008 22:03:03)

Hi,

I have used a picture that I have manipulated in Photoshop and have used this as a background image to a webpage that I am building.

I did this in 1024 x 768 screen resolution.

The problem I have is that after I have published this others who use higher screen resolutions see my images (As well as the background image) being "Tiled" all over the screen. Obviously the image used is not re-sizing to accomodate the differing screen sizes.

How do I ensure that this doesn't happen in a webpage with both background and normal pictures I load onto a website.

And how is this avoided especially with the new models of widescreen LCD screens that are now available.

thanks




Tailslide -> RE: Picture Size as Background in FP2003 (7/1/2008 1:52:13)

Assuming that you've got the background image on the body of the page you'd change this in your stylesheet:

body {..other stuff.. background: url(images/yourimagename.jpg) top center no-repeat;}


The no-repeat bit will ensure it doesn't tile. Without that it will.




jaybee -> RE: Picture Size as Background in FP2003 (7/1/2008 4:34:02)

The problem you have is that images don't resize. Well, at least, unless you specify the size as a percentage rather than as pixels.

If you want the image to go right across your background rather than sit in the middle, regardless of the screen width then you need to specify 100% width. The problem then is that the image will stretch to fit but it's likely to pixelate at larger sizes. There's no way round it unfortunately until Jpeg2 is widely accepted by browsers.

If you look at pro sites they usually don't use a single image as a background. It tends to be a colour wash that can be repeated seamlessly across a page fading into a solid background colour. Check out some sites that use images the way you want and right click then view background image and you'll see how they've been done.




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125