New Tactic about Responsive CSS Background Image

responsive css background

I suddenly noticed the significance of making a responsive background image while doing no alteration in terms of aspect ratio with respect to various widths. This happen while I am working on a not so big project endowed to my shoulders by VIP folks from the field of Education.

However, the big challenge is, we cannot modify any back end code or any HTML so still, we have to consider using a simple image. I stumble upon a remarkable page online containing various ways in doing this but I failed to save it but if anybody have it feel free to let me know so I can edit this post and include it for appropriate credit.

Let’s get it started.

The size of the image should be on the same height and width of the background image itself if ever you prefer the element to be displayed in full. One drawback of this technique is that you cannot apply it to image sprites same is true with responsive layouts. In the event you prefer the image to scale, maintain identical aspect ratio as well as leaving no space below and image chopping, always keep in mind that the width is alright but specifying a height is a bit of a challenge.

In this situation, you have to work more on the height with respect to the aspect ratio of the element per se and utilize a padding bottom while putting the height to zero. In this case, you can emphasize the image itself.

One trick that I use is, I am dividing the width to height and multiplying the result to a hundred. In this manner, you can get the percentage of with in relation to height. This in applied to the bottom padding as a percentage in order to bring out the image at the same time maintain the aspect ratio of the image while the element applied is consistent to all the widths. Using a [highlight]100% background size[/highlight] is also a must in order to keep the image to be in the same size with the element itself.

Here is the Formula:


HTML Markup


Don’t be frustrated when it does not work in your case but considering the example above, it worked all the time in my case. I hoped it helped you or a pal in a way or another. Spread the news!