How to make background image take full width without cropping? - html

Question

We have set an image as a background image using the following code below and place text on top of it. Is there a way to display the image as a background without the "cropping" regardless of the height of the content on top of the image?
A pattern that occurs is that as the content grows so does the height of the image. If the solution requires that we get rid of that, then I am okay with that.
Note: images will not always be the same size.
Current results
Desired results
.banner {
position: relative;
display: block;
}
.banner:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.banner__image {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.banner__content {
padding: 200px;
position: relative;
max-width: 900px;
text-shadow: 0 0 20px rgba(0,0,0,.6);
margin: 0 auto;
padding: 0 15px;
z-index: 2;
color: white;
}
<div class="banner">
<div class="banner__image" style="background-image: url('https://media.istockphoto.com/vectors/people-large-group-vector-id519533182')"></div>
<div class="banner__content">
<h1>Compellingly seize high-payoff supply chains</h1>
<h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
</div>
</div>

Answer 1

By using a percentage value in padding-bottom value, the percentage is calculated from the width of the element, not from height, as one might think.
Which means
padding-bottom: 42.773%; /* (438 × 100 / 1024) */
... will always have a minimum height allowing it to display the uncropped image (which, in your case has 1024px × 438px).
.min-ratio {
padding-bottom: 42.7%; /* (height × 100 / width) */
background-size: contain;
background-position: bottom center;
background-repeat: no-repeat;
width: 100%;
position: relative;
}
.banner__content {
position: absolute;
background-color: #00000065;
color: white;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 3rem;
}
#media(max-width: 600px) {
.banner__content {
position: static;
}
.min-ratio {
background-size: cover;
padding-bottom: 0;
}
}
.banner__content>* {
align-self: stretch;
}
<div class="min-ratio" style="background-image: url(https://media.istockphoto.com/vectors/people-large-group-vector-id519533182)">
<div class="banner__content">
<h1>Compellingly seize high-payoff supply chains</h1>
<h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
</div>
</div>
However, you'll need to stop the image from repeating vertically, using background-repeat:no-repeat so that when the div gets too tall (on mobile, for example) it doesn't repeat the image.
The above technique allows you to set a minimal ratio on an element, without having to hard-code width or height values across different #media responsiveness intervals.
Since stack snippets looks down, here's the fiddle: https://jsfiddle.net/websiter/mek0chne/4/

Answer 2

You could use an padding in .banner
.banner {
position: relative;
display: block;
padding : 50px 0;
}

Answer 3

one way to do this if you don't know what's the height of the image is going to be , you can use an image instead of a div with background and set its position to absolute : Fiddle
.banner {
position: relative;
display: block;
}
.banner:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.banner__image {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.banner__content {
padding: 200px;
position: relative;
max-width: 900px;
text-shadow: 0 0 20px rgba(0,0,0,.6);
margin: 0 auto;
padding: 0 15px;
z-index: 2;
color: white;
}
#bg{
position: absolute;
width: 100%;
}
<div class="banner">
<!--
<div class="banner__image" style="background-image: url('https://media.istockphoto.com/vectors/people-large-group-vector-id519533182')"></div>
-->
<img src="https://media.istockphoto.com/vectors/people-large-group-vector-id519533182" id="bg"/>
<div class="banner__content">
<h1>Compellingly seize high-payoff supply chains</h1>
<h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
</div>
</div>

Answer 4

You should look at the max and minimum height attributes in css for your class:
.banner
in addition you can also look at the background-repeat css attribute to prevent the image from repeating or alternatively to repeat on both or only on the x or y axis.
I can provide some code if you like but these are very self explanatory, there may be more elegant solutions but this will help you achieve what you're looking for.
Repeat:
https://www.w3schools.com/cssref/pr_background-repeat.asp
Height:
https://www.w3schools.com/cssref/pr_dim_min-height.asp
https://www.w3schools.com/cssref/pr_dim_max-height.asp

Answer 5

Then do not use the image as a background image. Use it as an normal image.
<div class="banner__image">
<img src="url of the image">
</div>
<div class="banner__content">
<!-- Your content here -->
</div>
And for the CSS
.banner__image img{
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
.banner__image{
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
}
.banner__content{
z-index: 3;
}
Now this should work