HOLLA TECH - LEARN

Multiple Backgrounds
 

The position of the background images can be changed, using the background-position property.
For example: 

div {
   width: 400px;
   height: 300px;
   background-image: url(csslogo.png), url(csscode.jpg);
   background-position: right top, left top;
   background-repeat: no-repeat;
}

 

Result: 

Holla Tech - Learn CSS3


Multiple Backgrounds
 

The position of the background images can be changed, using the background-position property.
For example:

div {
   width: 400px;
   height: 300px;
   background-image: url(csslogo.png), url(csscode.jpg);
   background-position: right top, left top;
   background-repeat: no-repeat;
}

 

Result: 

Holla Tech - Learn CSS3

NOTE!
Multiple backgrounds can also be specified using the background: shorthand property.

background: url(csslogo.png) right top no-repeat,
url(csscode.jpg) left top no-repeat;

 

TASK:
Copy and paste the line of codes into a text editor to play around with the outputs. 

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