Multiple Background Images with CSS

Some design goals involve the use of multiple background images. Figure 15.36 shows the code for creating multiple background images and Figure 15.37 shows the result.

In the div#multi{} rule, the width and height properties specify the size of the <div> element of id=“multi”, the background-image property specifies the two images (“rose Jransparent.png” and “grey_wall.png”) to use for its background (the first image occupies the top-most position and the last the bottom-most), the background- repeat property says the first image should be repeated across the x-axis and the second not repeated, and the background-size property says to make the size of the first image 60 x 60px and use the cover value for the second. Note that the image specified first is displayed on top. Also, the images on top must have transparent background in order for those underneath to be visible. This means that they must be saved in a file format that supports transparency (e.g., png).

In the div#inner {} rule, the width property specifies the width of the <div> element of id=“inner”, the padding property centers the element, both horizontally and vertically, inside the <div> element of id=“multi”, and color says to give the text content #F9F0B5 color. The h2{} rule centers the content of the <h2> element horizontally.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

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