CODEWITHSUNDEEP
htmlcssresponsive-design
RonTheOld
RonTheOld

Reputation: 777

Making an image scale down when window resize

I have a background image set as a background, and I want it so, when the user scales down the window, it will resize with it:

HTML:

<div class="parallax">
  </div>

CSS:

.parallax {
  background-image: url("../Images/back1.jpg");
  min-height: 700px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 20px;
}

I got it to work when I changed background-size: cover; to contain, but it cuts out some of the image from the left and right side.

Fiddle Link : here

Upvotes: 1

Views: 2408

Answers (2)

bellabelle
bellabelle

Reputation: 926

The code below makes the background image responsive too when a window is resized. I have updated your css code, removed min-height and background fixed and made the padding percentage in top and bottom.

 .parallax {
  background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center / cover;
  padding: 30% 0;
}
<div class="parallax">
</div>

Upvotes: 1

Johannes
Johannes

Reputation: 67778

In addition to my comments, here is what I wrote about in the last comment - a regular img tag with width: 100%and height: auto instead of a background-image:

img {
  width: 100%;
  height: auto;
}
<div>
  <img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>

Upvotes: 2

Related Questions