How to set pictures in css

CSS (Cascading Style Sheets) is a language used for web design that can be used to describe the appearance and style of web pages. CSS makes it easy to set up images on a web page and control their size, position, color, and other properties. In this article, we will explore how to set images in CSS.

In CSS, images are usually set through the background-image attribute. The background-image property is used in CSS to define the background image of an element. Here is a basic CSS declaration for setting an image as the background of an element:

background-image: url("image.jpg");

In this declaration, we use the url() function to specify the URL of the image, where "image.jpg" is The name of the image file you want to use to set the background.

If you need to set the size of the image, you can use the background-size attribute. For example, the following declaration will make the image 200 pixels wide and 100 pixels tall:

background-size: 200px 100px;

You can set the background size to a specific percentage, for example, set the background size to 50% of the parent element:

background-size: 50%;

You can also use the background-position property to position the image on a specific part of the element. For example, the following declaration will position the image in the center of the element:

background-position: center;

You can set the background position to a specific pixel or percentage value, for example, to move the background image 50 pixels to the left:

background-position: left 50px;

You can also use the background-repeat attribute to specify whether the image should repeat in the background of the element. By default, images are tiled both horizontally and vertically. The following statement will prevent images from being tiled horizontally:

background-repeat: no-repeat;

If you want to use different images in different parts of the web page, you can assign these styles to different classes and then use them in the HTML document These classes are used to specify different elements. For example, the following declaration will apply an image to an element with a class name of "header":

.header {
    background-image: url("header.jpg");
    background-size: cover;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
}

In this declaration, we use a CSS class named "header" and apply an header.jpg" is applied to elements in this class. We also specified that the image should cover the entire element and should be positioned in the center of the element and should not repeat horizontally.

In short, setting images in CSS is a simple but very useful technique. By using properties such as background-image, background-size, background-position and background-repeat, we can effectively manipulate images in web pages. Hopefully this article has given you a basic understanding of how images are set up with CSS, which you can use in your own web designs.

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