CSS

Create A Full Page Background Image

In this snippet we are looking at what you can do with the CSS background-size property. This property will allow you to define the size of the image that you have defined as the background image, similar to how you will use the width and height when adding an image.

The value of the background-size property can either be:

  • Contain - This specifies that the image should be scaled to as large as possible while being less or equal to the background of the element.
  • Cover - This specifies that the image should be scaled to as small as possible while being greater or equal to the background of the element.
  • Percentage
  • Length
  • Auto

Therefore to make the image cover the entire background of the HTML element you will need to use the cover value just like the snippet below.

html {
  background: url(img/background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

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