Zymic Webmaster Forums > Background Image Strech?

Zymic Webmaster Forums > Web Design & Development > General Web Design Discussion

weasleysww

Dec 18 2008, 03:05 AM

Is there any way to stretch a background image? I have a gradient image that I'd like to us as a background, but my pages are different heights, is there any way to stretch it with out severe distortion?

Mortalis9

Dec 18 2008, 05:07 AM

CODE

body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}

flyboy

Dec 18 2008, 05:33 AM

CODE

/*----The following repeats the background image horizontally(The images are being called from a folder called images)----*/

body
{
background-image: url('images/background-bg.jpg');
background-repeat: repeat-x;
}

/*----The following repeats the background image vertically(The images are being called from a folder called images)----*/

body
{
background-image: url('images/background-bg.jpg');
background-repeat: repeat-y;
}

/*----Short hand code----*/

body
{
background-image: url('images/background-bg.jpg') repeat-x;
}

body
{
background-image: url('images/background-bg.jpg') repeat-y;
}

}

weasleysww

Dec 18 2008, 06:10 AM

Mortalis I can't get that to work, and flyboy that tiles the image

k.digennaro

Dec 18 2008, 02:40 PM

yes you're correct weasleysww, but that's what you want to do. Reduce your gradient to 1px horizontal (if it's a horizontal gradient). Then repeat it, this is the best way to create a smooth gradient on the web.

Kevin

Andrew

Dec 21 2008, 05:23 AM

You aren't seeing what this person is asking, they want to actually stretch the image, distort the size. Not repeat it.

I don't know of a way, unless you edit the image in photoshop or paint.

Paradoks

Dec 21 2008, 08:14 PM

All i can tell you is, Make the Gradient at the TOP, then set the BACKGROUND COLOR to the LAST pixel color of ur gradient, that way, it still looks nice.. just not completly what you want.

IamShipon1988

Dec 22 2008, 04:52 PM

The code Moralis showed would work however you have the follow the steps on this site to make it work: http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

In a general note, that code should work without tricks however CSS2 does not allow a background image to be stretched. That was one of the main focus of CSS2.

I would suggest you try this method instead as it is explained fairly well: http://www.quackit.com/html/codes/html_str...round_image.cfm

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.