CODEWITHSUNDEEP
htmlcss
miller75
miller75

Reputation: 127

Background image resize height

I am trying set a background image in a div and have it resize with the browser. The width works fine, but I can't get the height to stretch or shrink.

Using content:url works exactly how I want it to but it only works with Chrome.

.bg01 {
   content:url('images/bg.jpg');
   max-width:100%;
}

I have tried the following, the width is fine but the height doent change

.bg01 {
   background-image:url('images/bg.jpg');
   background-repeat: no-repeat;
   display: inline-block;
   width:750px;
   height: 240px;
   background-size:contain;
}

Upvotes: -1

Views: 90

Answers (4)

Henrique Erzinger
Henrique Erzinger

Reputation: 1147

It looks to me like background-size: cover is what you want, not contain.

EDIT: after looking at your comments I think I understand what you're after better. Is there a reason you have to do it with CSS only? Because the content: url(...) thing is essentially the same as adding the image to the markup, so you can achieve the exact same thing with this:

/* using content: url(...) */

.content-url {
  content: url('https://static.magento.com/sites/default/files8/styles/column_4/public/WEB-2612_Listing_Images_Events_r1v1_b_16.jpg?itok=cVv6YfZf');
  max-width: 100%;
}


/* using an img tag */

.markup > img {
  max-width: 100%;
}
<p>using content: url(...):</p>
<div class="content-url"></div>

<br><br>

<p>using an img tag:</p>
<div class="markup">
  <img src="https://static.magento.com/sites/default/files8/styles/column_4/public/WEB-2612_Listing_Images_Events_r1v1_b_16.jpg?itok=cVv6YfZf" alt="">
</div>

Also, support for content: url() is actually pretty decent, including the most recent versions of firefox, safari and even edge and ie11: https://caniuse.com/#search=content%3A%20url

Upvotes: 2

Yudiz Solutions
Yudiz Solutions

Reputation: 4449

Please check below code hope it will work for what you want, for getting same result as content:"", you have to set aspect ratio of background div by change the padding value same as the actual image aspect ratio. :)

.content-box { margin-bottom: 10px;; content: url(https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg); width: 100%;}
.bg-box { background: url(https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg) no-repeat top left / 100% auto;}
.bg-box::after { content: ""; position: relative; top: 0; left: 0; padding-top: 100%; display: block;}
<html>
    <head><title>bg image same as content css</title>
    </head>
<body>
    <div class="content-box"></div>
    <div class="bg-box"></div>
</body>
</html>

Upvotes: 0

Qye
Qye

Reputation: 1

body{
  background-image: url("https://placehold.it/2000x1024");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

Upvotes: 0

sheriffderek
sheriffderek

Reputation: 9043

Here's an example using 'cover.' I can't remember using anything other than cover in 95% of cases. Basically - it's always cover - unless it's a repeating background pattern.

html, body {
  height: 100%; /* they don't know how tall they are... */
}

body {
  background-image: url('https://placehold.it/2000x2000');
  background-size: cover;
  background-position: center center;
}

https://jsfiddle.net/sheriffderek/6cyz1mLk/ examples other than on body

Upvotes: 0

Related Questions