A common issue in Web Development is dealing with images in content. Often they need to be sizes and aligned in specific ways to achieve the desired design goals. When using the <img> tag, this can be very difficult.

To overcome these problems, I have developed a technique that works very well for me. The way it works is to wrap the <img> tag in a div, and then on the div you apply the background image.

This allows you to use css rules like background-size, background-postition, etc.. which has very flexible options. It’s been very successful for me, and I hope it works for you as well. Here’s how it works:

The HTML

It’s most likely you will have some html templates that contain the content images that you want to use. That might be just a simple <img> tag, so let’s start there:

<img src="/uploads/my_image.webp" alt="My Image">

Because of SEO concerns, it can be best to keep that syntax. It has the alt tag which can be important for SEO and Accessibility. So what we want to do is wrap that image in a div, and hide the original image. Like this:

<div class="content-image">
  <div class="image" style="background-image: url('/uploads/my_image.webp');">
    <img style="display: none;" src="/uploads/my_image.webp" alt="My Image">  
  </div>
</div>

Depending on your setup, you may be using PHP or some other language. However, the end result would be something like the above being rendered to the browser.

You might not need the wrapping div “content-image”, but I will explain why I use it. The reason is that if we can have a “relative” anchor, we can then make the child div be absolute positioned to take up that full space. Then we can add some padding-top value to the parent div, and it gives us a nice ratio scaled image.

To illustrate that further, we need to look at the CSS.

The CSS

Again, depending on your setup you might have SCSS or some other language. The CSS you might use would be something like this:

.content-image {
  position: relative;
  z-index: 1;
  padding-top: 100%;
}

.image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

The padding top can be considered as a ratio of height to width. So 100% gives you a square that will scale up and down depending on screen width. You could make it 50%, and then it would be 2x wide as it is tall.

You might only need the child div without the parent div. In that case, you can leave out the position: absolute, as well as the top, right, bottom, left. But I wanted to provide the full featured version, even though it does require an additional wrapper div.

I hope you found this useful. Note that you can also change the background-position to control how the image is aligned. I like this technique because css offers so many good options for size and position, and your images will look good even if they are in various different sizes. It’s sort of like an auto cropping done very easily with css.