CSS Background - Ebhor.com

The background effects for web pages can range from plain colors to attractive images. All having a specific purpose or thought behind them. CSS background properties can be also be used for the same purpose. Depending upon the type of background required, there are various background effects that we’ll discuss in this section.

Background Color

The name itself suggests the plain and simple purpose for this property.
The background-color property can be used to provide different colors to the background.
The background-image: url(“image.png”); takes image path or image url to show in background
The sample code for the same goes like:

 body{
      background-color: wheat;
}

body{

background-color: wheat;

}

The complete example is

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background-color: wheat;
        }
    </style>
</head>

<body>

    <h1>CSS background-color property</h1>

    <p>background-color property is used to set background color.</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: wheat;

}

</style>

</head>

<body>

<h1>CSS background-color property</h1>

<p>background-color property is used to set background color.</p>

</body>

</html>

The value for the background-color property can be any known CSS color-name, hex code or RGB code.
Color names can be specified like black, white, green, pink, orange, yellow, red etc.
Hex code are six-digit hexadecimal color code followed by # symbol like #000000, #ffffff, #FFFF00 etc.
RGB code is (r,g,b) combination of color between 0 and 255 like (245,222,179) for wheat.

Background Image

Here, instead of color we can have and image file as the web-page background.
The sample code for this is as follows:

 body {
       background-image: url("image.png");
}

body {

}

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background-image: url("http://ebhor.com/examples/images/pexels-photo-1193743.jpeg");
        }
    </style>
</head>

<body>

    <h1>CSS background-imagee property</h1>
    <p>background-image property is used to set background image.</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("http://ebhor.com/examples/images/pexels-photo-1193743.jpeg");

}

</style>

</head>

<body>

<h1>CSS background-imagee property</h1>

<p>background-image property is used to set background image.</p>

</body>

</html>

Photo by Free Creative Stuff from Pexels

Background Repeat

In order to restrict the background image to repeat in only x or y direction (horizontally or vertically), we use the background-repeat property along with the background image property. The code goes as following

body {
     background-image: url(“image.png”)
     background-repeat: repeat-x;
}

body {

background-repeat: repeat-x;

}

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background-image: url("http://ebhor.com/examples/images/pexels-photo-150.jpeg");
            background-repeat: repeat-x;
        }
    </style>
</head>

<body>

    <h1>CSS background-repeat property</h1>
    <p>background-repeat property is used to repeat image horizontally (in x direction) or vertically (in y direction) or no repeat.
    </p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: repeat-x;

}

</style>

</head>

<body>

<h1>CSS background-repeat property</h1>

<p>background-repeat property is used to repeat image horizontally (in x direction) or vertically (in y direction) or no repeat.

</p>

</body>

</html>

Now the image will repeat in only x direction.

If you do not want the image to repeat in any direction, the same property can be used like

body {
     background-image: url(“image.png”);
     background-repeat: no-repeat;
}

body {

background-repeat: no-repeat;

}

Background-Position

Used to specify the position of image on the screen. This can be done by the background-position property. The property can be used as follows:

<!DOCTYPE html>
<html>

<head>
    <style>
       body {
   background-image: url("http://ebhor.com/examples/images/pexels-photo-150.jpeg");
   background-repeat: no-repeat;
   background-position: right top;
 }
  
        </style>
</head>

<body>
 <h1>CSS background-position property</h1>
  <p>background-position property is used to show background image at specific position
  </p>
   
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

background-position: right top;

}

</style>

</head>

<body>

<h1>CSS background-position property</h1>

<p>background-position property is used to show background image at specific position

</p>

</body>

</html>

backgroud-position property can have following values

Background-Attachment

This property is used when you want your background image to be fixed while scrolling the web-page. The sample code:

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

body {

background-repeat: no-repeat;

background-position: right top;

background-attachment: fixed;

}

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background-image: url("http://ebhor.com/examples/images/pexels-photo-150.jpeg");
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <h1>CSS background-attachment</h1>
    <p>CSS background-attachment property is used to show background image at specific position
    </p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>
    <p>Image position is fixed on scroll</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

background-position: center;

background-attachment: fixed;

}

</style>

</head>

<body>

<h1>CSS background-attachment</h1>

<p>CSS background-attachment property is used to show background image at specific position

</p>

<p>Image position is fixed on scroll</p>

</body>

</html>

All these properties can also be used in single line in what is known as the shorthand feature of background property. An example of the same is:

body {
     background: lightblue url(“image.png”) 
     no-repeat top;
}

body {

background: lightblue url(“image.png”)

no-repeat top;

}

The order of the properties for shorthand is:
Color>Image>Repeat>Attachment>Position

<!DOCTYPE html>
<html>

<head>
    <style>
    body {
    	background-color:wheat;
   background-image: url("http://ebhor.com/examples/images/pexels-photo-1193743.jpeg");
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
 }
        </style>
</head>

<body>
<h1>CSS background shorthand property</h1>
<p>CSS background shorthand property </p>
  
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color:wheat;

background-image: url("http://ebhor.com/examples/images/pexels-photo-1193743.jpeg");

background-repeat: no-repeat;

background-position: center;

background-attachment: fixed;

}

</style>

</head>

<body>

<h1>CSS background shorthand property</h1>

<p>CSS background shorthand property </p>

</body>

</html>