How to add image to background image in css

In CSS, you can overlay images onto background images. Methods include: specifying image URL (1), adjusting position (2), setting size (3), controlling transparency (4), and using CSS filters ( 5).

How to overlay images on background images in CSS

In CSS, you can overlay images on background images images to create richer, more visually appealing designs. Here's how to do it:

1. Use the background-image attribute

Use the background-image attribute to specify the overlay image URL. You can use multiple background images, separated by commas:

<code class="css">background-image: url("background-image.png"), url("overlay-image.png");</code>

2. Adjust the position of the overlay image

By default, the overlay image will cover the entire background image. To adjust the position of the overlay image, you can use the background-position attribute:

<code class="css">background-position: center center, top left;</code>

3. To set the size of the overlay image

you can usebackground-size Property sets the size of the overlay image:

<code class="css">background-size: contain, 50% 50%;</code>

4. Control the transparency of the overlay image

By using background-blend- The mode attribute can mix background images and overlay images:

• normal: The overlay image completely covers the background image.
• multiply: The color of the overlay image is multiplied by the color of the background image to produce a darker effect.
• screen: The color of the superimposed picture is subtracted from the color of the background picture, producing a brighter effect.

Example:

<code class="css">background-blend-mode: multiply;</code>

5. Using CSS Filters

CSS filters can be applied to overlay images to further enhance their visual appearance Effect. For example, you can use the filter attribute to blur an overlay image:

<code class="css">filter: blur(5px);</code>

By combining these attributes, you can create a variety of effects, such as:

• Add on top of a background image Watermark
• Overlay text on a background image
• Create an overlay shadow or highlight effect

The above is the detailed content of How to add image to background image in css. For more information, please follow other related articles on the PHP Chinese website!