CSS Background

In this chapter we will talk about styles of the background. As you know we can make some changes in order to make our website much more beautiful with css styles. Now we are going to talk about the changes that we can do with our background. In this capter we will learn about the following:

Background Color

We use the background-color property when we want to change the color of our background. So for that we need to use some color: you can take the color from Color Picker. As you remember, the color can be written like the following types:

  • a color name - "red"
  • a HEX value - "#ff0000"
  • an RGB value - "rgb(255,0,0)"

When we want to change the background color of our tags, we just need to give the background-color property to our tag. Let's see how we need to write it in our code. We can write it in the other css file, or in <head> section, or give the inline css.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2 style="background-color:#8ebf42">This is some heading for example.</h2>
    <p>Some paragraph as for example.</p>
  </body>
</html>

In the above example, the h2 and p elements have different background colors.You can check it on your browsers with your editors or with our online editor, which you can find on the homepage.

Background Image

Now we are going to learn about images as backgrounds. Sometimes we want to put some picture as a background. For that we need to write the following code.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      }
    </style>
  </head>
  <body>
    <h1>Background image</h1>
    <h2>This is some heading as an example.</h2>
    <p>Some paragraph as an example.</p>
  </body>
</html>

Let's explain. We have some picture, which name is "background.jpg". If we want to see that image as an all webpage background, so we use the above code. In browser it must look like this.

You can put any image that you want to see as background. Try it.

Background Repeat

By default, the background-image property repeats an image both horizontally and vertically. Sometime we don't need that. We need to repeat just horizontally or vertically. For that we need to use "repeat-x" for horizontally and "repeat-y" for vertically. For horizontally repeat we need to use the following code.

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

And for vertically repeat we need to use the following code.

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

But sometimes we don't need to repeat the image. So what do we need to do in this time? If we want to show the image only once we use "no-repeat" value. It should look like this in the code.

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

Background Position

When we want to change the position of the image, we need to use the background-position property. The background-position property has the following values:

  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom

If we want to show our image on right, we need to write the following code.

background-position: value;

CSS Syntax of background-position.

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

We can write this 3 properties at once, but in this time we need to replace "background-image" property with "background" property like this:

body {
  background: url("background.jpg") no-repeat right top;
}

We can use "background-position" with pixels or percent values too. The code must look like this.

body {
  background: url("background.jpg") no-repeat x% y%;
}

The "x" means position horizontally and "y" is a position vertically. We can write the same with pixels.