Site Sponsors

Posts Tagged ‘background image’

CSS - repeating background images

Thursday, June 19th, 2008

Background images are one of the easiest aspects of a website to do and can transform your site tremendously if done correctly.

You can have background images repeating vertically (y-axis), horizontially (x-axis) or until it covers the entire element background.

In the following examples I will firstly show the full CSS then I will show the minimilised version of the same CSS code.

Repeating background image to cover entire background

Minimal version

#div1
{
background:url(stripe.png);
}

Full version

#div1
{
background-image:url(stripe.png);
}

Repeating background image horizontially

Minimal version

#div2
{
background:url(stripe.png) repeat-x;
}

Full version

#div2
{
background-image:url(stripe.png);
background-repeat: repeat-x;
}

Repeating background image vertically

Minimal version

#div3
{
background:url(stripe.png) repeat-y;
}

Full version

#div3
{
background-image:url(stripe.png);
background-repeat: repeat-y;
}

Repeating background images example

You can also have a background image which you would like to show just the once and not repeat it at all. This can be achieved by doing the following:
Minimal version

#div1
{
background:url(stripe.png) no-repeat;
}

Full version

#div1
{
background-image:url(stripe.png);
background-repeat: no-repeat;
}

Tags: , ,
Posted in:Backgrounds, CSS | No Comments »

Creating a 100% background image

Saturday, May 17th, 2008

Have you ever wanted to make a background image 100% high and 100% wide but having trouble with browser compatibility or text not been viewable? Well if thats the case hopefully this is for you!!!

I have been looking around for a while and there are a few examples out there where they use position:static for trying to place the content on top of the background image in IE unfortunately this method never seemed to work properly.

Anyway here is a technique I picked up with a couple of modifications.

First of the XHTML

<!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>
    <title>100% background image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link type="text/css" rel="stylesheet" href="style.css" media="screen" />
</head>

<body>

	<div id="background">
		<img src="cosworth.jpg" id="backgroundImage" alt="" />
	</div>

	<div id="container">
		<div id="content">
			This is my old 360bhp 4x4 Sierra Sapphire Cosworth which I have made a 100% background!!!!
			<br /><br />
			And even if you change the size of the browser, resolution it still be 100%!!!
			<br /><br />
			This works in
			<ul>
				<li>IE 5.5/6/7</li>
				<li>FireFox</li>
				<li>Safari (PC)</li>
				<li>Opera</li>
				<li>Netscape</li>
			</ul>

			Cool aye!!!

		</div>
	</div>

</body>
</html>

Now for the the CSS

html, body {
margin:0;
padding:0;
width:100%;
height:100%;
font-family:verdana, tahoma;
overflow:hidden;
}

#backgroundImage{
position:absolute;
width:100%;
height:100%;
z-index:1;
}

#container {
width:100%;
height:100%;
overflow:auto;
z-index:2;
top:0;
left:0;
position:absolute;
}

#content {
position:relative;
width:900px;
background-color:#000;
z-index:6;
margin:0px auto;
color:#fff;
}

With the code above we are removing the scroll bars from the html and body and placing an image to be 100% within the html and body. We are then creating a new container at 100% which acts as the body of the site above the image using the z-index and placing everything inside giving the impression of a background image which works in:

  • IE 5.5/6/7
  • FireFox
  • Safari (PC)
  • Opera
  • Netscape

A working example can be found here: 100% background image example

Tags: , , ,
Posted in:Backgrounds, CSS, Images | No Comments »