CSS Backgrounds

❮ Prev Next ❯

The background of an element can be changed using several CSS properties:

  • background-color
  • background-image
  • background-clip
  • background-position
  • background-origin
  • background-repeat
  • background-attachment
  • background-size

and the shorthand property background, which allows to shorten definitions and group them on a single line.

background-color accepts a color value, which can be one of the color keywords, or an rgb() or hsl() value: 


  p{
  background-color :yellow;
} 

  div{
  background-color :#333;
}

Instead of using a color, you can use an image as background to an element, by specifying the image location URL: 

p{
  background-color :url(image.png);
}

background-clip lets you determine the area used by the background image, or color. The default value is border-box which extends up to the border outer edge.

Other values are

  • padding-boxto extend the background up to the padding edge, without the border
  • content-boxto extend the background up to the content edge, without the padding
  • inheritto apply the value of the parent

When using an image as background you will want to set the position of the image placement using the background-positionproperty: left, right, centerare all valid values for the X axis, and top, bottonfor the Y axis: 

p{
  background-position :top right;
}

If the image is smaller than the background, you need to set the behavior using background-repeat. Should it repeat-x, repeat-yor repeaton all the axis? This last one is the default value. Another value is no-repeat.

background-originlets you choose where the background should be applied: to the entire element including padding (default) using padding-boxto the entire element including the border using border-boxto the element without the padding using content-box.

With background-attachmentwe can attach the background to the viewport, so that scrolling will not affect the background: 

p{
  background-attachment :fixed;
}

By default the value is scrollT. here is another value,local.

The last background property is background-size. We can use 3 keywords:auto, coverand contain. auto is the default.

autoexpands the image until the entire element is covered by the background.

containstops expanding the background image when one dimension (x or y) covers the whole smallest edge of the image, so it's fully contained into the element.

You can also specify a length value, and if so it sets the width of the background image (and the height is automatically defined): 

div{
  background-size :100%;
}

If you specify 2 values, one is the width and the second is the height: 

div{
  background-size :800px 600px;
}

The shorthand property background allows to shorten definitions and group them on a single line.

This is an example: 

div{
  background-size :url(bg.png) top left no-repeat;
}

If you use an image, and the image could not be loaded, you can set a fallback color: 

div{
  background-size :url(image.png) yellow;
}

You can also set a gradient as background: 

div{
  background-size :linear-gradient(#fff, #333);
}

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
        /* Nice rule! */
        body{
          background-image:url('../../images/random-images/dog.jpg') yellow;
        }
        div{
          color:white;
        }
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <div> 
        <h3>welcome to Coding Koleji </h3>
        <p>where you will be able to lean how to code for free </p>
      </div>
    </body>
  </html>
❮ Prev Next ❯