Happy new year everyone
Welcome to Learn Tech Tips Blogspot, I am Zidane (nick name: 鸡蛋) I Wishes you have a wonderful new year and succeed in your life
If you a front end developer. I think sometime you will do a responsive with a background image. So today I will support you how to easy do it.
How to make a div background-image responsive
I have summary a solution on this video link, you can go check it out.
First of it, please be follow me if you like my topic. Thanks so much
Let’s Follow me on
👉 Tiktok
👉 Facebook:
On backhground image: you MUST remember 3 attributes: aspect-ratio, width and background-size:
– with aspect-radio: you should make width/height for sure the image with full resolution with desing
– with width of background image: you should let a value is 100vw / 100% same as my video
– width: background-size: you MUST choose: ‘contain’ for sure image display on view size
just three above attributes you can make a div background image responsive already.
Is it Easy everyone, I think you all can do it after read this topic.
I will post all my source code here for you easy reference
HTML
<!DOCTYPE html>
<html lang=“zho”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link rel=“stylesheet” href=“public/css/responsive.css?v=1.2”>
</head>
<body class=“content”>
<div class=“main-title”>
<div>Welcome to Learn Tech Tips – Zidane</div>
<div> <a href=“https://learn-tech-tips.blogspot.com”>
https://learn-tech-tips.blogspot.com </a> </div>
</div>
<div class=“title”>
Guideline:
</div>
<div class=“title”>
How to make a div background-image responsive
</div>
<div class=“description”>
<ul>
<li> Set background-size: contain </li>
<li> Set aspect-ratio: width/height </li>
<li> Set width: 100vw </li>
</ul>
</div>
<div class=“diamond”>
</div>
</body>
</html>
CSS:
@media screen and (min-width: 0px) and (max-width: 320px) {
body {
font-size: 4px;
}
}
@media screen and (min-width: 321px) and (max-width: 639px) {
body {
font-size: 5px;
}
}
@media screen and (min-width: 640px) and (max-width: 1200px) {
body {
font-size: 6px;
}
}
@media screen and (min-width: 1201px) and (max-width: 1900px) {
.body {
font-size: 10px;
}
}
.content {
padding: 20px;
border: 2px solid orange;
box-shadow: 3px 3px orange;
background-color: white;
margin: 50px;
}
.main-title {
font-size: 5em;
color: yellow;
background-color: black;
border-radius: 20px;
padding: 20px;
font-weight: 900;
text-align: center;
}
.title {
margin-top: 20px;
font-size: 3em;
color: red;
font-weight: 900;
}
a {
color: white;
}
.description {
font-size: 3em;
}
ul li {
line-height: 2em;
}
.highlight {
text-transform: uppercase;
background-color: yellow;
padding: 20px;
}
.diamond {
background-image: url(‘../../public/image/mobile/Mobile_OJ05.png’);
background-repeat: no-repeat;
background-position: top center;
background-size: contain;
aspect-ratio: 881/501;
margin-top: 30px;
}
If you have any question or feedback about topic: make a div background image responsive. leave your comment, we can discuss about it
