One of the problems I’ve encountered when I started to develop responsive websites was the ability to create a CSS responsive background image. Then I’ve found a solution which, for now, it is a good one and I would like to share it with you.

The solution it is simple and it implies to use background-size: 100%; for the container which has the background image and also, to make it fully responsive, a new conainer with top padding it is needed. Let’s see exactly how will this work on Bootstrap 3.0 CSS framework.

Bootstrap grid system overview

Bootstrap grid system was confusing for me the first time I used it. Recently I did some research to change the old CSS framework that I usually use for my web projects. After long searches and tests I decided that Bootstrap 3.0 it will be the best for me. I’m still not fully happy about Bootstrap, mainly because the fact that the menu does not accept multiple menu levels, but I have did some changes to make it work as I want.

As I said, the problem which I encountered with Bootstrap was the grid system. Although it is something logical, it was confusing for me in the beginning and it took me some time to understand it so I can benefit the maximum of all features.