Search code examples
javascriptcssreactjsimagebackground-image

CSS: Image scale with width

I have a div with an image background (in React with Next.js, but that shouldn't matter).

import styles from './my-component.module.css';
import Background from '../../../public/assets/images/background-image.png';

// later

<div
  style={{ backgroundImage: `url(${Background})` }}
  className={`${styles['background-image']}`}
>

Here is the CSS I'm currently using:

.background-image {
  border-radius: 8px;
  background-size: cover;
  background-repeat: no-repeat;
  height: auto;
}

I can't get the image to take the full height. It should always take the display's width, but take as much height as it can without stretching or repeating. How can I do that?

enter image description here

Update: Yes, the container has more height than the element.

enter image description here

Update 2 Viira's solution almost works, but the image doesn't respect padding on the right side.

enter image description here

Solution

  • Maybe this can help.

    Don't set it in background image try insert it in img tag

    *{box-sizing: border-box;}
body {
  margin: 0;
}
.background-image {
  
  border-radius: 8px;
  background-size: cover;
  background-repeat: no-repeat;
  height: auto;
}

.container {
  display: table;
  width: 100%;
}

.img {
  display: table-cell;
  width: 100%;
  position: absolute;
  z-index: -1;
}
 
.img img {
  width: 100%;
}

.text {
  display: table-cell;
  padding: 30px;
  width: 100%;
}
    <div class="background-image">
  <div class="container">
    <div class="img">
      <img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg">
      </div>
    <div class="text">
  <h1>Are you ready</h1>
  <p>Click the link</p>
  <button>Click Here</button>
    </div>
    </div>
</div>

    NOTE: The image is stretched to full width because its resolution is low. you can set it's width to auto to display its original size.

    Solution 2:

    As the OP mentioned, padding is not respected by the image. I came up with a solution. Since the .container div is in display: table; padding isn't allowed there. So, by giving the padding to its parent .background-image this issue will be lifted.

    *{box-sizing: border-box;}
body {
  margin: 0;
}
.background-image {
  
  border-radius: 8px;
  padding: 15px 40px;
}

.container {
  display: table;
  width: 100%;
  max-width: 100%;
  position: relative;
}

.img {
  display: table-cell;
  width: 100%;
  position: absolute;
  z-index: -1;
}
 
.img img {
  width: 100%;
}

.text {
  display: table-cell;
  padding: 30px;
  width: 100%;
}
    <div class="background-image">
  <div class="container">
    <div class="img">
      <img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg">
      </div>
    <div class="text">
  <h1>Are you ready</h1>
  <p>Click the link</p>
  <button>Click Here</button>
    </div>
    </div>
</div>

    Set padding for .background-image div so that the padding will apply.