How to add pictures in css

Methods to add images in CSS are: 1. Use the background-image attribute; 2. Use the img element; 3. Use the CSS background-url attribute. In addition, there are other properties such as background-size, background-repeat, background-position, and object-fit that can be used to control the appearance and behavior of the image.

How to add images using CSS

There are several ways to add images in CSS:

1. Use the background-image attribute

.image {
  background-image: url("image.png");
}

background-image The attribute is used to specify the background image of the element. In this case, image.png is the image file to be added.

2. Use the img element

<img src="/static/imghwm/default1.png"  data-src="image.png"  class="lazy" alt="Image Description">

img The element is used to embed images in the document. The src attribute specifies the image file to display, while the alt attribute provides a textual alternative version of the image.

3. Use the CSS background-url attribute

.image {
  background-url: url("image.png");
}

background-url attribute is used to specify the background image of the element, similar to background-image property. However, background-url cannot be used to set other background properties, such as background-color or background-repeat.

Other Properties

In addition to these basic methods, there are other CSS properties that can be used to control the appearance and behavior of images:

• background-size: Used to specify the size of the image in the element.
• background-repeat: Used to specify whether the image is repeated within the element.
• background-position: Used to specify the position of the image in the element.
• object-fit: Used to control how the image adjusts to match the size of its parent element.

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