0

I'm creating a website and I am attempting to add a background image to the page that covers the entirety of the page and is responsive, yet I am having difficulty doing so. Whenever I tweak the width and height to match cover the entirety of the homepage, I obviously find that the dimensions don't scale when I move the page to another monitor, or make the window smaller. However, I need to tweak the width and height in order for the image to cover the page. Is there a way I could make the image responsive AND tweak the dimensions to my liking?

#background-image-container {
  position: absolute;
  max-width: 100%;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
<div id="background-image-container">
  <img src="static/images/waco-siege2.jpg" id="background-image" style="opacity: 0.7; display: block;" width="1370" height="665">
</div>

I realize that my code is a mess and some parts may contradict other parts; but this just shows everything I have currently attempted.

3 Answers 3

2

Your markup for what you are trying to do looks wrong to me. You need to set the background on the container element, not place the image inside of it.

<div id="background-image-container" style="background-image:url(static/images/waco-siege2.jpg)"></div>

I also think you'll want to use background-size:cover instead of contain.

You could also just set the image width and height to 100%, but that would distort the image if it changes the aspect ratio.

1

The issue is that you're using an <img> element rather than a CSS background image, yet you're trying to style it with CSS.

Here's how you'd implement a CSS background-image which can responsively cover your entire page. Also note that you'd need to change background-size: contain to background-size: cover to accomplish this.

#background-image-container {
  position: absolute;
  max-width: 100%;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  z-index: 0;
  background-image: url('static/images/waco-siege2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
<div id="background-image-container"></div>

0
1

The other alternative to above, if you wanted to use the image (can be useful for thumbnails) is object-fit.

I've stripped most the other styles out just for the simplicity of the example. You'll need to define a width and height on the parent container of the image for the object-fit to work too though.

#background-image-container {
    display: block;
    width: 100vw;
    height: 50vh;
}

#background-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
<div id="background-image-container">
  <img src="static/images/waco-siege2.jpg" id="background-image">
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.