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!

  • Very nice info and straight to the point. I am not sure if this is truly the best place to ask but do you folks have any ideea where to hire some professional writers? Thanks!

  • I thought it was going to be some boring old publish, but it really compensated for my time. I will publish a link to this page on my weblog. I am sure my visitors will find that really useful

  • My brother recommended I might like this blog. He was entirely right. This post truly made my day. You can not imagine simply how much time I had spent for this information! Thanks!

  • This site was how do I say it? Relevant!! Finally I ave found something that helped me. Many thanks!