Make Image Adjust to Viuewport

[cangrejero]

I’m using the css below to set the height of the div with a class of “.intro”. It works fine for me:

…
* {
box-sizing: border-box;
}

body {
margin: 0;
font-weight: 500;
font-family: ‘HelveticaNeue’;
}

section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;

&:nth-of-type(2n) {
background-color: #FE4B74;
}
}

.intro {
height: 90vh;
}

.content {
display: table-cell;
vertical-align: middle;
}
…

However, i’d like to make the background image of the div to adjust to the viewport height. Any guidance appreciated. Thanksl

[Beverleyh]

There isn’t an image in the code sample you provided, but have a look into the background-size CSS property.

For specific help, please create a reduced demo in CodePen using just enough HTML and CSS to clearly show any problems you’re having.

[Author]

Posts