Background-image

Contact Us or call 1-877-932-8228
Background-image

Background-image

Examples of properties associated with background images are shown in BackgroundsAndColors/Demos/BackgroundImage.html, which is listed at the end of this section.

The background-image property is used to specify the background image of an element. It can be applied to block elements and inline elements.

selector {
	background-image: url(images/bg.png);
}

Background-repeat

The background-repeat property is used with background-image to specify whether and how a background image should repeat. Possible values are listed below:

  • no-repeat - does not tile
  • repeat-x - tiles horizontally
  • repeat-y - tiles vertically
selector {
	background-image:url(url);
	background-repeat:value;
}

Background-attachment

The background-attachment property is used with background-image to specify whether a background image should scroll as the content is scrolled or whether the content should scroll over it. Possible values are listed below:

  • scroll
  • fixed
selector {
	background-image:url(url);
	background-attachment:value;
}

According to the specification, background-attachment specifies whether a background image is fixed relative to the viewport (e.g., the browser window) or scrolls along with the document.

Background-position

The background-position property is used with background-image to specify the location of a background image. Possible values are listed below.

  • top
  • right
  • bottom
  • left
  • center
  • any combination of the above (e.g., top center or bottom left)
selector {
	background-image:url(url);
	background-position:value;
}

Background-size

CSS3 introduces the background-size property, allowing us to control the size of the background image as displayed in its parent element (the element for which the image serves as the background). We can use any of the following as values for background-size:

  • auto, the default value.
  • a length, setting the width and height of the background image (in any valid CSS length units), e.g., background-size:20px 40px.
  • a percentage, setting the width and height as a percentage of the parent element, e.g., background-size:50% 50%.
  • cover, scaling the background image to be as large as possible so that the area of the element is completely covered by the background image; some part of the image may not be shown.
  • contain, scaling the background image to the largest size so that its width and height fit inside the element.

The following page shows examples of different combinations of background properties:

Code Sample:

BackgroundsAndColors/Demos/BackgroundImage.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Background Image</title>
</head>
<body>
<h1>Background Image</h1>

<div style="height: 200px; width: 500px; color: #ffffff; 
			background-image: url(Images/block.gif);">
	background-image: url(Images/block.gif);
</div>

<h2>Background Repeat</h2>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600; 
			background-image: url(Images/block.gif); background-repeat: no-repeat">
	background-color: #ff6600; background-image: url(Images/block.gif);
	background-repeat: no-repeat;
</div>
<hr>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600; 
			background-image: url(Images/block.gif); background-repeat: repeat-x">
	background-color: #ff6600; background-image: url(Images/block.gif);
	background-repeat: repeat-x;
</div>
<hr>
<div style="height:200px; width: 500px; color: #ffffff;
			background-color: #ff6600; 
			background-image: url(Images/block.gif); background-repeat: repeat-y">
	background-color: #ff6600; background-image: url(Images/block.gif); background-repeat: repeat-y;
</div>

<h2>Background Attachment</h2>
<h3>background-attachment: fixed</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			overflow: scroll; white-space: pre;
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-attachment: fixed;">
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-attachment: fixed;<br>
---- C O D E   O M I T T E D ----

			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-attachment: fixed;
</div>
<h3>background-attachment: scroll</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			overflow: scroll; white-space: pre; 
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-attachment: scroll;">
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-attachment: scroll;<br>
---- C O D E   O M I T T E D ----

			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-attachment: scroll;
</div>

<h2>Background Position</h2>
<h3>background-position: right</h3>
<div style="height: 200px; width:500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: repeat-y;
			background-position: right;">
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: repeat-y; background-position: right;
</div>
<h3>background-position: bottom</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: repeat-x;
			background-position: bottom;">
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: repeat-x; background-position: bottom;
</div>
<h3>background-position: center</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-position: center;">
			background-color: #ff6600; background-image: rl(Images/block.gif);
			background-repeat: no-repeat; background-position: center;
</div>
<h3>background-position: 20% 20%</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-position: 20% 20%;">
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-position: 20% 20%;
</div>
<h3>background-position: 20px 20px</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-position: 20px 20px;">
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-position: 20px 20px;
</div>

<h2>Background Size</h2>
<h3>background-size: 10% 90%</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-size: 10% 90%">
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-size: 10% 90%;
</div>
<h3>background-size: cover</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-size: cover">
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-size: cover;
</div>
<h3>background-size: contain</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-size: contain">
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-size: contain;
</div>

</body>
</html>
Next