HostOnNet Blog

How to make background image as responsive in WordPress

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

Installed Organic WordPress theme for client. But some images was not fully shown in mobile device. Client wanted to make the background responsive.

Organic theme was used inline style like below to set background image.

<div class="cms-fancybox-item clearfix" style="background-image:url(http://www.sitename.com/images/coupon.jpg);">

So I added a extra class ‘coupon’ through WPBakery Page Builder and added the following in style.css

.coupon .cms-fancybox-item{
	background-repeat:no-repeat;
	background-size:contain !important;
	background-position:center;	
}

background image as responsive

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 Wordpress

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.