For the first time, I am working on a school project that requires me to create a responsive website. I am following the "mobile first" approach. On stackoverflow, I came across a helpful way of making background images responsive:
background-image: url(./assets/img/bg-blue-sm.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;However, the images are behaving strangely when I increase the screen size. How can I resolve this issue? You can observe the behavior here: https://i.sstatic.net/qVk9T.jpg
.container {
display: inline-block;
cursor: pointer;
background-color: var(--beige);
border-radius: 100%;
padding: 2rem;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: var(--pink);
margin: 6px 0;
transition: .4s;
border-radius: 1rem;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.navigatie {
text-transform: uppercase;
font-family: 'Abrade Heavy';
display: flex;
justify-content: space-between;
align-items: center;
background-image: url(./assets/img/nav-sm.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 1rem .5rem;
}
.navigatie li:nth-child(2) {
margin-top: -2rem;
}
a {
text-decoration: none;
list-style: none;
color: var(--beige);
}
.header {
background-image: url(./assets/img/header-bg-sm.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
height: 40rem;
padding-top: 8rem;
margin-top: -7rem;
}
.hide {
display: none;
}
.date {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 10rem;
margin-top: 2rem;
}
.date-txt {
font-family: 'Abrade Heavy';
text-transform: uppercase;
color: #b3b3b3;
font-size: 1.5rem;
margin: 0;
}
.intro-article {
background-image: url(./assets/img/bg-blue-sm.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 40rem;
margin-top: -11rem;
padding-top: 8rem;
}<header>
<ul class="navigatie">
<li><a href=""><img src="./assets/img/logo-sm.png" alt=""></a></li>
<li><a href="">programmatie</a></li>
<li>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</li>
</ul>
<div class="header">
<h1 class="hide">INTERNATIONAAL STRAATTHEATER</h1>
<img src="./assets/img/titel.png" alt="IBS header background">
<div class="date">
<p class="date-txt">alle ogen gericht op</p>
<img src="./assets/img/datums-sm.png" alt="VRIJ 24/08 ZAT 25/08 ZO 26/08">
</div>
</div>
</header>
<main>
<article class="intro-article">
<h2 class="hide">een wereld vol fantasie</h2>
<img src="./assets/img/wereld-sm.png" alt="Een wereld vol fantasie">
<p class="intro-txt">Een arsenaal aan gekke wezens of vriendelijke gastheren nodigen u nu al uit op een weekend vol verwondering en bewondering. Een combinatie van walking acts en tentoonstellingen zorgen voor een onvergetelijke ervaring.</p>
</article>
</main>