TutorialLab
css background

CSS Background

CSS Background:

The CSS background properties are used to define the background effects for elements.

CSS background properties:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background Color:

The Background Color property specifies the background color of an element.

The background color of a page is set like this:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a background color!</p>

</body>
</html>

With CSS, a color is most often specified by:

  • a HEX value – like “#ff0000”
  • an RGB value – like “rgb(255,0,0)”
  • a valid color name – like “red”

Background Image:

The Background Image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

Background Image Repeat Horizontally Or Vertically:

By default, the Background Image property repeats an image both horizontally and vertically.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("gradient_bg.png");
    background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>

Background Repeat property also take value repeat-x for making x-axis repetition  and repeat-y for making y-axis repetition.

Background Image Set Position and No Repeat:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("abc.png");
    background-repeat: no-repeat;
    background-position: right top;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Tutorial Lab background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>

</body>
</html>

All possible values for background position property. top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

Background Image Fixed Position:

To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("abc.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>If you do not see any scrollbars, try to resize the browser window.</p>

</body>
</html>

another value that background attachment property accept is ‘scroll’.

Background Short Hand Property:

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

The shorthand property for background is background:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: #ffffff url("abc.png") no-repeat right top;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Now the background image is only shown once, and it is also positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>

</body>
</html>

When using the shorthand property the order of the property values is:

  • Background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Previous lecture Next Lecture

Aizaz Ali

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.