I took the code from here. The code is working well but when I added an extra div
to wrap the div
with class fullwidth
, the images height does not scale equally depending on the height of the screen.
This is how it looks originally:
body,
html {
height: 100%;
}
.fullwidth {
display: flex;
flex-direction: column;
height: 100%;
}
.repeat-x {
flex: 1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.bg-1 {
background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
.bg-2 {
background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
.bg-3 {
background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
<div class="fullwidth">
<div class="repeat-x bg-1"> </div>
<div class="repeat-x bg-2"> </div>
<div class="repeat-x bg-3"> </div>
</div>
After wrapping fullwidth
with another div
:-
body,
html {
height: 100%;
}
.fullwidth {
display: flex;
flex-direction: column;
height: 100%;
}
.repeat-x {
flex: 1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.bg-1 {
background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
.bg-2 {
background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
.bg-3 {
background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
<div id="newid">
<div class="fullwidth">
<div class="repeat-x bg-1"> </div>
<div class="repeat-x bg-2"> </div>
<div class="repeat-x bg-3"> </div>
</div>
</div>
You can easily shrink an image by using the flex-wrap property in CSS and it specifies whether flex items are forced into a single line or wrapped onto multiple lines.
However, with flexbox, the images are fully responsive—you can test it by resizing the browser window. Another advantage is that now the images (flex items) can be easily positioned in different ways (we'll see how to do it below).
You can choose one of these to enlarge the #newid
to the whole height of the current viewport:
#newid {
height: 100vh; /* this is how you do it in 2017 */
height: 100%;
}
For reference: I can highly recommend this post if you wan to dive deeper into css units: CSS Units - What is the difference between vh/vw and %?
Add height: 100%
to the newid
container - this allows the flexbox
to inherit the height
of the document.
See demo below:
body,
html {
height: 100%;
}
#newid {
height: 100%;
}
.fullwidth {
display: flex;
flex-direction: column;
height: 100%;
}
.repeat-x {
flex: 1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.bg-1 {
background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
.bg-2 {
background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
.bg-3 {
background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
<div id="newid">
<div class="fullwidth">
<div class="repeat-x bg-1"> </div>
<div class="repeat-x bg-2"> </div>
<div class="repeat-x bg-3"> </div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With