HostOnNet Blog

Responsive background image with Bootstrap

Looking for Linux Server Admin or WordPress Expert? We can help.

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.
Posted in Bootstrap, Web Design

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.