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
Explore My Other Channel for More Cool and Valuable Insights
π Youtube Learn Tech Tipsπ 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
@learntechtips happy new year. How to make a div background image responsive #responsive #cssstandard #learntechtips #learntechtipszidane #happynewyear ♬ Merry Christmas and Happy New Year - Lia Syila
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
