Background Image

stormswimmer · 28-Apr-2007, 12:29 PM #1

Hey everyone,

I am developing a website for a local church with an image for the background. The problem is, that when a computer with a larger screen views the website the picture tiles, and the image was not made to tessellate so it doesn't look right. Is it possible to make the the image stretch instead of tile?

-stormswimmer

MMJ · 28-Apr-2007, 12:52 PM #2

Got a link or code?

namenotfound · 28-Apr-2007, 01:03 PM #3

In the CSS have this:

body {
background-image: url('yourimage.jpg');
background-repeat: no-repeat;
width: 100%;
}

That will have it stretch the image, but not tile it.

stormswimmer · 28-Apr-2007, 02:57 PM #4

The image doesn't stretch.

jaymanson · 29-Apr-2007, 02:39 AM #5

Quote:

Originally Posted by namenotfound

body {
background-image: url('yourimage.jpg');
background-repeat: no-repeat;
width: 100%;
}

The width value within the body tag will only affect the width of the body of the page - not the width of the background image. There is currently no CSS attribute to do so. However, the same effect can be achieved with a little CSS trickery!

To demonstrate, here's a little code as an example:

HTML

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="styles.css" rel="stylesheet" type="text/css"> <title>Untitled Document</title> </head> <body> <img src="image.jpg" /> <div id="content">CONTENT</div> </body> </html>

CSS

HTML Code:

body img {
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#content {
	position: relative;
	background-color: #FF0000;
	margin: 0 auto;
	height: 500px;
	width: 500px;
	z-index: 2;
}

Replace the image.jpg in the HTML with a path to any image you like. This image sits in the body and the CSS gives it a width and height of 100% stretching it to fill the screen. Remember to use a large sized image as a smaller image will become very pixelated if stretched to fit a large monitor.

All the content goes inside the content div which floats one index higher than the image - you can size and position that anywhere you like; I've just put it there and made it red so it's obvious!

Hope this helps

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)