Skip to main content

A Beginner's Guide to CSS | Part Ten - Backgrounds in CSS

Submitted by helen on Monday, June 14, 2010 - 22:12; Modified on Wednesday, August 24, 2016 - 10:52

Welcome to the A Beginner's Guide to CSS series, Part Ten Backgrounds in CSS, where I'll show you how to place a background on an element. Before we continue onto more convoluted topics, I felt I should demonstrate how to apply backgrounds to elements, as this task is integral when it comes to the structure of a page. Your site would be very boring if nothing had a background colour or a background image! So, let us proceed.

The CSS background properties

There are nine CSS background properties, five of which I will cover in this tutorial. The remaining four will be detailed in a later installment, as they rely on more advanced knowledge of CSS. The properties we will look at today are:

How to set a background colour using the background-color property

background-color specifies the background colour of an element, in either a hexadecimal value, such as #000 (that's the hex value for black), a named colour, such as black or an RGB value, such as rgb(0,0,0).

CSS Code:


p.colourNameExample {
  background-color:orange;
  color:white; /* Added for example purposes. */
  font-weight:bold; /* Added for example purposes. */
}

p.colourHexExample {
  background-color:#ffa500;
  color:white; /* Added for example purposes. */
  font-weight:bold; /* Added for example purposes. */
}

p.colourRgbExample {
  background-color:rgb(255,165,0);
  color:white; /* Added for example purposes. */
  font-weight:bold; /* Added for example purposes. */
}

(X)HTML Code:


<p class="colourNameExample">I have an orange background colour specified using the name of the colour.</p>
<p class="colourHexExample">I have a hexadecimal (hex for short) orange background colour.</p>
<p class="colourRgbExample">I have an rgb orange background colour.</p>

Result:

I have an orange background colour specified using the name of the colour.

I have a hexadecimal (hex for short) orange background colour.

I have an rgb orange background colour.

How to set a background image using the background-image property

background-image specifies the URL to a background image. This can be a relative path, such as /images/image.jpg or an absolute path, such as www.mysite.com/images/image.jpg.

When using relative paths, the path to the image is relative to the directory containing your stylesheet. So, if your styles are in a folder called styles and your images are in a folder called images, both within the the same directory, you would need to type ../images/image.jpg to access your images, as in the examples below:

CSS Code:


p.imageExample {
  background-image:url("../images/bg-image-test.jpg"); /* Using a relative path. */
}

p.imageExample {
  background-image:url("www.mysite.com/images/bg-image-test.jpg"; /* Using an absolute path. */
}

Both of the above examples will produce the same result, but I personally use relative paths over absolute paths. This is mostly because relative paths put slightly less demand on the server, compared to absolute paths.

(X)HTML Code:


<p class="imageExample">I have an image as a background.</p>

Result:

I have an image as a background.

To remove a background image from an element, you set background-image to none.

CSS Code:


p.no_image {
  background-image:none;
}

How to repeat a background image using the background-repeat property

background-repeat specifies how to tile a background image. There are six values but we will only concern ourselves with four of them, in this tutorial. They are:

no-repeat
don't tile the background image.
repeat-x
tile the background image along the x-axis.
repeat-y
tile the background image along the y-axis.
repeat
tile the background image along the x and y axes.

CSS Code:


p.noRepeatExample {
  background-image:url("../images/bg-repeat-test.jpg"); 
  background-repeat:no-repeat;
  height:90px; /* Added for example purposes. */
  border:1px solid black; /* Added for example purposes. */
  font-weight:bold; /* Added for example purposes. */
}

p.repeatExample {
  background-image:url("../images/bg-repeat-test.jpg"); 
  background-repeat:repeat; 
  height:90px; /* Added for example purposes. */
  border:1px solid black; /* Added for example purposes. */
  font-weight:bold; /* Added for example purposes. */
}

p.repeatXExample {
  background-image:url("../images/bg-repeat-test.jpg"); 
  background-repeat:repeat-x; 
  height:90px; /* Added for example purposes. */
  border:1px solid black; /* Added for example purposes. */
  font-weight:bold; /* Added for example purposes. */
}

p.repeatYExample {
  background-image:url("../images/bg-repeat-test.jpg"); 
  background-repeat:repeat-y;
  height:150px; /* Added for example purposes. */
  border:1px solid black; /* Added for example purposes. */
  font-weight:bold; /* Added for example purposes. */
}

(X)HTML Code:


<p class="noRepeatExample">This background is not repeated.</p>
<p class="repeatExample">This background is repeated.</p>
<p class="repeatXExample">This background is repeated along the x axis, i.e., the horizontal axis.</p>
<p class="repeatYExample">This background is repeated along the y axis, i.e., the vertical axis.</p>

Result:

This background is not repeated.

This background is repeated.

This background is repeated along the x axis, i.e., the horizontal axis.

This background is repeated along the y axis, i.e., the vertical axis.

When using background-repeat, you must specify an image, otherwise there will be nothing to repeat.

How to fix a background image into place using the background-attachment property

background-attachment is used to determine whether a background image scrolls with the page or is fixed in its position. It takes three properties:

  • fixed - keep the background fixed in place so that it does not scroll with the page.
  • inherit - have the background inherit its attachment property from a parent or ancestor element.
  • scroll - have the background scroll with the page, and not stay in the same place when the page scrolls.

CSS Code:


div.fixedExample {
  background-image:url("../images/bg-attach-test.jpg");
  background-attachment:fixed; 
}

div.scrollExample {
  background-image:url("../images/bg-attach-test.jpg");
  background-attachment:scroll;
}

Result:

How to position a background image using the background-position property

background-position specifies the x and y coordinates for a background. It can take one or two percentage values, or one or two length values, which are top, right, bottom, left and center. The horizontal value is always supplied first, followed by the vertical value. background-position also takes the value inherit, which supplies whichever value is set for the background position on the parent element or an ancestor element. Let's look at an example.

CSS Code:


p.backgroundPositionExample1 {
  background-image:url("../images/bg-position-test.jpg");
  background-position:right top; 
  background-repeat:no-repeat; /* Added for example purposes. */
  height:150px; /* Added for example purposes. */
  border:1px solid black; /* Added for example purposes. */
}

This positions the background to the top of the screen and to the right.

p.backgroundPositionExample2 {
  background-image:url("../images/bg-position-test.jpg");
  background-position:100% 0%; 
  background-repeat:no-repeat; /* Added for example purposes. */
  height:150px; /* Added for example purposes. */
  border:1px solid black; /* Added for example purposes. */
}

This is the same as the above, but using percentages instead of length values. Here, the background's horizontal position is 100% (the far right of the screen) and its vertical position is 0% (the top of the screen).

p.backgroundPositionExample3 {
  background-image:url("../images/bg-position-test.jpg");
  background-position:bottom; 
  background-repeat:no-repeat; /* Added for example purposes. */
  height:150px; /* Added for example purposes. */
  border:1px solid black; /* Added for example purposes. */
}

This positions the background to the bottom and centre of the screen. When you don't specify a second value, it is assumed that the first value is the horizontal value and the vertical position of the background is center.

p.backgroundPositionExample4 {
  background-image:url("../images/bg-position-test.jpg");
  background-position:50% 50%; 
  background-repeat:no-repeat; /* Added for example purposes. */
  height:150px; /* Added for example purposes. */
  border:1px solid black; /* Added for example purposes. */
}

This sets the background's x and y coordinates to centre, thus centre aligning the image on the screen, both horizontaly and vertically.

p.backgroundPositionExample5 {
  background-image:url("../images/bg-position-test.jpg");
  background-position:center; 
  background-repeat:no-repeat; /* Added for example purposes. */
  height:150px; /* Added for example purposes. */
  border:1px solid black; /* Added for example purposes. */
}

This is the exact same as the statement above. It sets the background's x coordinate to center, and, as we're not specifying a vertical coordinate, the y value defaults to center or 50%.

(X)HTML Code:


<p class="backgroundPositionExample1">I am positioned at the top right of the screen.</p>
<p class="backgroundPositionExample2">I am positioned at the top right of the screen, but using percentages instead of length values.</p>
<p class="backgroundPositionExample3">I am positioned to the bottom and centre of the screen.</p>
<p class="backgroundPositionExample4">I am positioned in the centre of the screen, both horizontally and vertically.</p>
<p class="backgroundPositionExample5">I am positioned in the centre of the screen, both horizontally and vertically, but using one value, instead of two.</p>

Result:

I am positioned at the top right of the screen.

I am positioned at the top right of the screen, but using percentages instead of length values.

I am positioned to the bottom and centre of the screen.

I am positioned in the centre of the screen, both horizontally and vertically.

I am positioned in the centre of the screen, both horizontally and vertically, but using one value, instead of two.

The shorthand background property

The CSS background property will become a very intimate friend as you progress along your CSS journey, because it enables you to manipulate all of the properties mentioned above, in one declaration. For this reason, it is preferential to use background whenever you want to manipulate backgrounds, instead of writing out each (or several of) the statements mentioned above.

Here is how background is formed.


background: background-color background-url background-repeat background-attachment background-position;

And here are some examples.

CSS Code:


p.bgExample1 {
  background:url('../images/bgshorthand.jpg') no-repeat center;
  border:2px solid #988a25;
  height:80px; /* Added for example purposes. */
}

p.bgExample2 {
  background:#ecd745 url("../images/bgshorthand.jpg") repeat-x bottom;
  border:2px solid #988a25;
  height:120px; /* Added for example purposes. */
}

(X)HTML Code:


<p class="bgExample1">I use less code to create my background.</p>
<p class="bgExample2">So do I!</p>

Result:

I use less code to create my background.

So do I!

In the first example, we're specifying a background image of ../images/mypic.jpg, setting it to not repeat and centring it along the x and y axes.

In the second example, we're specifying a background colour of #ecd745, an image of ../images/bgshorthand.jpg, and we're telling it to repeat along the x-axis and positioning it to the centre and bottom of the viewport. This is less apparent, as the background is tiling, but if we remove the background colour, you can more clearly see the position of the background image.


p.bgExample2b { 
  background:url("../images/bgshorthand.jpg") repeat-x bottom; 
  border:2px solid #988a25; 
  height:120px; /* Added for example purposes. */ 
}

So do I!

As the image is repeated along the x-axis, the centre alignment isn't noticed at all, but the vertical alignment is.

Revision Notes

18th August 2016

Increased the height of the repeat-y example, in the Repeating backgrounds section, to better demonstrate a repeating y axis.