How to make background image take full width without cropping?

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

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

Answer 5

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