HostOnNet Blog

How to make background image as responsive in WordPress

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