HOLLA TECH - LEARN
The background-image Property
 

The background-image property sets one or several background images in an element. Let’s set a background-image for the <body> element.

The CSS:

body {
  background-image: url(“css_logo.png”);
   background-color: #e9e9e9;
}

 

NOTE!
The url specifies the path to the image file. Both relative and absolute paths are supported.

Result: 

Holla Tech - Learn CSS

NOTE!
By default, a background-image is placed at the top-left corner of an element, and is repeated both vertically and horizontally to cover the entire element.

The background-image Property
 

Background-image can be set not only for the whole page, but for individual elements, as well.
Below we set a background image for the <p> element.

The HTML:

<p>This paragraph has a background image.</p>

 

The CSS: 

p {
   padding: 30px;
   background-image: url(“green_photo.jpg”);
   color: white;  
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
To specify more than one image, just separate the URLs with commas.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT