How to make background images non-repeating with CSS-CSS Tutorial-php.cn

How to make background images non-repeating with CSS

藏色散人

Release： 2023-01-04 09:38:22

Original

15331 people have browsed it

CSS method to make the background image non-repeating: first create a new html file; then enter a div tag and add a class to this tag; finally achieve it through the attribute "background-repeat:no-repeat;" The background image does not need to be repeated.

How to make background images non-repeating with CSS

The operating environment of this tutorial: Dell G3 computer, Windows 7 system, HTML5&&CSS3 version.

Recommendation: "css video tutorial"

Open the html software development tool to create a new html file, and then enter a

tag to add a class class to this tag , used to set the style of the background image. As shown in the picture:

css sets the background to not repeat

Set the background image style. Create a

1. Introduce the background image;

2. Set the width and height of the background image (note: the effect cannot be seen without setting the width and height)

Code:

<style type="text/css">
.bg-repeat{
background-image: url(img/ye.png);
width: 500px;
height: 380px;
}
</style>

Copy after login

How to make background images non-repeating with CSS

View the page effect. Save the html page and open it with a browser, and find that the background image is repeated. As shown in the picture:

How to make background images non-repeating with CSS

Set the background image not to repeat. Return to the html code page and add background-repeat: no-repeat; to the class style, as shown in the figure:

How to make background images non-repeating with CSS

to view the page effect. Save the html page and open it with a browser, and you will find that the background image is no longer repeated. As shown in the picture:

How to make background images non-repeating with CSS

All the codes on the page. You can directly copy all the code and paste it into the new HTML page. After saving, you can see the page effect. (Note: The background image in the case is a local path. You need to modify the background image path after pasting the code.)

All codes:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置背景不重复</title>
<style type="text/css">
.bg-repeat{
background-image: url(img/ye.png);
width: 500px;
height: 380px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="bg-repeat">
设置背景图片不重复

</div>

</body>

</html>

Copy after login

How to make background images non-repeating with CSS

The above is the detailed content of How to make background images non-repeating with CSS. For more information, please follow other related articles on the PHP Chinese website!