Using Multiple Background Images

DMCA.com Protection Status

Multiple Background Images Using CSS3

As you can see here, we can apply multiple background images to html elements thanks to CSS3.

A pattern image and a cute image are used in the background of this div element.

As shown below;

  • All images to be used are indicated by placing a comma between them.
  • The leftmost, that is, the first written image will appear at the bottom.
  • The position of each picture and how it repeats can be determined separately.
#box1 {
    background-image: url(image1.jpg), url(image2.jpg);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

This example can also be abbreviated as:

#box1 {
    background: url(Image1.jpg) right bottom no-repeat, url(Image2.jpg) left top repeat;
}

 

multiple images in background, use multiple background images, make multiple images as background, using multiple background images css

EXERCISES

Using multiple background image in the web page Try It


COMMENTS




Read 850 times.

Online Users: 3831



css-multiple-background-images