How to keep the title background image unchanged after the content is enlarged
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sliding door</title>
<style>
*{
padding: 0px;
margin: 0px;
}
//When the width of the div is larger than the background image, it can't show its background completely
div{
width: 100px;
height: 60px;
background: red url("images/nav-all.jpg") repeat;
margin: 200px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-----How to solve
1. The background picture is tiled but the background is copied without effect
2. Set background picture size
Background size: 200px 60px; image deformation
- real problem solving
- Sliding doors: problems when out of range
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sliding door</title>
<style>
*{
padding: 0px;
margin: 0px;
}
/*div{
width: 100px;
height: 60px;
background: red url("images/nav-all.jpg") no-repeat;
margin: 200px auto;
background-size: 200px 60px;
}*/
.man{
width: 100px;
height: 60px;
background: red url("images/nav-left2.jpg") no-repeat;
margin: 200px auto;
}
.right{
width: 20px;
height: 60px;
background: url("images/nav-right.jpg") no-repeat;
float: right;
}
</style>
</head>
<body>
<div class="man">
<div class="right"></div>
</div>
</body>
</html>
- Another sliding door
.all{
width: 100px;
height: 60px;
background:red url("images/nav-center.jpg") repeat-x;
margin: 200px auto;
}
/*Left arc*/
.left{
/*width: 20px;*/
width: 100%;
height: 60px;
background: url("images/nav-left2.jpg") no-repeat;
}
.right{
width: 100px;
height: 60px;
background: url("images/nav-right.jpg") no-repeat center right;
}
</style>
</head>
<body>
<!-- <div class="man">
<div class="right"></div>
</div> -->
<div class="all">
<div class="left">
<div class="right"></div>
</div>
</div>
</body>
</html>
-----Three background pictures, left and right, keep him in the middle of the left and right, so as not to deform
- Background image cutting implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sliding door</title>
<style>
*{
padding: 0px;
margin: 0px;
}
div{
width: 100px;
height: 60px;
border: 20px solid #000;
box-sizing: border-box;
border-image: url("images/nav-all.jpg") 20 fill repeat;
margin: 200px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>