• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / CSS / Controlling Background Images and Colours

Controlling Background Images and Colours

17 January 2003 / 6 Comments

This tutorial shows you how to work with the various CSS background properties. Using CSS, you can specify things like:

  • The background colour to use for a Web page, table, paragraph, etc
  • The background image for a Web page, table, paragraph, etc
  • Whether the background image scrolls with the page, or is fixed on the screen
  • Whether the background image repeats
  • The position of the background image

Adding a nice coloured or graphical background to your Web pages is a quick and easy way to spice up your site. However, it’s also very easy to make Web pages look horrible, or even unreadable with the wrong type of background! The section at the end of the tutorial will help you avoid some of the common pitfalls associated with backgrounds.

Specifying background colours

The background-color property lets you set the background colour for an HTML element. For example:


p { background-color: yellow; }

This is a paragraph with a yellow background colour.

Setting a background image

You can use the background-image property to specify a background image for an HTML element. For example, to set a background image for a Web page, you could use something like this:


<html>

<head>
<style>
  body
  {
    background-image: url("teepees.jpg")
  }
</style>
</head>

<body>
<h1>Here is my Web Page with a background image!</h1>
</body>

</html>

See this example in action! (Use your browser’s Back button to return here.)

Note that you can also use the background-image property (and indeed any of the background properties) on divs, tables, table cells, paragraphs, etc.

Creating a “watermark” background image

By default, a page background image will scroll with the page. However, using the background-attachment: fixed property, it’s possible to create a “watermark” background that stays fixed in the same place on the screen while the page scrolls:


body
{
  background-image: url("teepees.jpg");
  background-attachment: fixed
}

To see how this looks, check out this example. Try scrolling up and down!

Specifying how the background image tiles

You can see that the background image repeats itself many times, in order to fill the whole page. You can control this tiling effect using the background-repeat property, as follows:

background-repeat: repeat
Tiles the image both horizontally and vertically. This is the default setting.
background-repeat: repeat-x
Tiles the image in the horizontal direction only. Good if you want the background running across the top of the page.
background-repeat: repeat-y
Tiles the image in the vertical direction only. Great for left-hand page borders!
background-repeat: no-repeat
No repeating takes place; only one copy of the image is displayed. This is good if you want to use a big image that isn’t designed to tile.

Examples:


body
{
  background-image: url("teepees.jpg");
  background-repeat: repeat-x;
}

Tiles the image across the page. See a demo.


body
{
  background-image: url("teepees.jpg");
  background-repeat: repeat-y;
}

Tiles the image down the page. See a demo.


body
{
  background-image: url("teepees.jpg");
  background-repeat: no-repeat;
}

Just displays the image once. See a demo.

Positioning the background image

CSS gives you control over exactly where your background image is placed within the HTML element. To position your image, use the background-position property as follows:

background-position: x% y%
Places the image x% across the page and y% down the page. Values of "0 0" indicate the top left hand corner.
background-position: x y
Places the image x units across the page and y units down the page. For example, "50px 25px" places the image 50 pixels to the right of the top left corner, and 25 pixels below it. You can use any CSS units to specify the position.
background-position: position
Positions the image using one of various positioning words. These are: top left, top center, top right, center left, center center, center right, bottom left, bottom center and bottom right.

Note that when using vertical percentage positions, or the vertical center or bottom positions, you also need the following in your CSS, to tell the browser to make the outer HTML element the height of the browser window:


html
{
  height: 100%;
}

Examples:


html
{
  height: 100%;
}

body
{
  background-image: url("teepees.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%
}

Displays the image in the centre of the page. See a demo.


body
{
  background-image: url("teepees.jpg");
  background-repeat: no-repeat;
  background-position: 100px 50px
}

Displays the image 100 pixels to the right of, and 50 pixels below, the top left corner of the page. See a demo.


html
{
  height: 100%;
}

body
{
  background-image: url("teepees.jpg");
  background-repeat: no-repeat;
  background-position: center right
}

Displays the image in the centre right of the page. See a demo.

Backgrounds – not just for pages!

Don’t forget that you can use these background properties on most HTML elements – not just the body element. For example, here is our teepees image being used as a table background:


<table style="background-image: url(teepees.jpg); border: 1px solid gray;">
<tr>
<td><h1>Here are some teepees in a table!</h1></td>
</tr>
</table>

And this is how it renders:

Here are some teepees in a table!

Combining properties

You can use the background property to specify all the background properties easily in one go. For example:


html
{
  height: 100%;
}

body
{
  background: url("teepees.jpg") no-repeat center center black
}

This sets the page background to black, with the teepees image in the centre of the page, non-repeating. See a demo.

Some notes on style and readability

Images that weren’t meant to tile

Unless you’re using the background-repeat: no-repeat property, it is important that the image you’re using is designed to tile. For example, this page looks horrible, because the background image that was used was not designed to tile! (Don’t stare at it too long, or you might go cross-eyed!)

Backgrounds that clash with text

Some background images or colours may look very pretty, but if they make your page text hard to read, they’re probably best avoided. If you want to use a page background image, choose one that is not too “busy”, and that contrasts well with the text colour.

Your turn!

If you’d like to practice putting background images in your pages and page elements, try downloading some images from the web. Save the image to a folder on your hard drive somewhere, then link to it from your style sheet.

Filed Under: CSS Tagged With: background-color, background-image, background-position, background-repeat, cascading style sheets, color, stylesheets, url

Reader Interactions

Comments

  1. wycan says

    12 March 2011 at 7:13 pm

    I have searched the web for weeks looking for this information – on some high-profile sites. One gives this bit, another gives that. But not one has given the vital set of codes needed to make things work. First, the 3 major codes for positioning an image. (I found the 50% 50% worked for me. Then the vital tip – including the body height as being 100%.

    I am building an entire new site with a large background image as motif on most pages with a table superimposed. It seems to be working.

    Thanks! This is a really useful site. I am grateful and majorly impressed!

    [Edited by wycan on 12-Mar-11 19:15]

    Reply
  2. matt says

    14 March 2011 at 12:29 am

    Thanks wycan – I’m glad my tutorial helped! ๐Ÿ™‚

    Reply
  3. shashank says

    9 March 2012 at 4:55 am

    great article! been searching for this for a long time.. is there any way how we can stretch the background image so as to occupy the entire webpage ?? the positioning of the webpage using 50% 50% worked right for me..but what i really want to do is fill the page background using the image.

    Reply
  4. matt says

    9 March 2012 at 6:16 pm

    @shashank: See:

    http://www.w3schools.com/cssref/css3_pr_background-size.asp

    eg:

    background-size: 100% auto;
    

    or:

    background-size: 100% 100%;
    

    You should also make sure your parent elements (eg html & body) have “height: 100%”.

    Reply
  5. shashank says

    10 March 2012 at 7:09 am

    yes! works fine! thank you so much ๐Ÿ™‚

    Reply
  6. matt says

    20 March 2012 at 1:29 am

    @shashank: Good to hear ๐Ÿ™‚

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Letโ€™s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I wonโ€™t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits