Create Fluid Background Image with CSS

Question

I am trying to build a simple fluid image that can resize based on screen size.

But I am having trouble to get the image smaller when the width of the browser gets smaller.

HTML:

<main>
    <section class="slider-ctn">
        <figure class="logo"></figure>
    </section>
</main>

CSS:

.slider-ctn figure.logo {
    margin: auto;
    background-image: url('../Images/logo.200x100.png');
    width: 200px;
    height: 100px;
}

Answer 1

If you set the background-size to 100% 100% or cover the image will stretch to fit the container. Remove the width (or restrict the width by setting the parent's width) and set height: 0; padding-top: 50% on the figure to make the height of the figure half of the width, so the aspect ratio will match the image and be fluid.

* {margin:0;padding:0;}
.slider-ctn {
  margin: auto;
  width: 200px;
}
.slider-ctn figure.logo {
  background: url('https://dummyimage.com/200x100/000/fff') top left no-repeat;
  height: 0;
  background-size: cover;
  padding-top: 50%;
}

<main>
  <section class="slider-ctn">
    <figure class="logo"></figure>
  </section>
</main>