HostOnNet Blog

Responsive background image with Bootstrap

We are working on to offer a new service ‘SSL Certificate’ for Maximize Security of your Data and Transactions.

For that, I created a page and following is the screenshot.


As you can see in the screenshot,a background image with some description

One of the problem I’ve faced is the background image was not visible in responsive view.

I’ve found the following solution to make the background image as responsive.

.banner {
    background: #d9e3ed url("../images/header-banner.jpg") ;
    background-size:100% auto;
    background-repeat: no-repeat;

About Sibi Antony

Bootstrap and Android LOVER.I've been creating things for the web for over 10 years, from the period of flash and table based layout web sites till mobile and tab friendly web sites.