Color Section Background – Responsiveness

Hey!

Sorry for the delay.
We are working on your ticket please wait while we update the results here soon.

The image in the private content is applied as a inline style using color section. inline styles have the highest specificity and cannot be altered using custom CSS. The result you get using color section is final.

If you like to make alterations or modify the image in mobile screens you need to remove the background image from color section and apply it using custom CSS.

Add an ID to the color section and use the below css to remove background image in portable devices

#bgimage{ 
	background: #000 url(https://nrtt.com/wp-content/uploads/2016/02/nrtt-our-services-background-75.jpg);
	background-size: 80%;
	background-position:bottom right;        
}
/* Home page section images on mobile */
@media only screen and (max-width: 767px) {
#bgimage{ 
	background: #000!important;
}
}

To maintain the ratio of the image use background size property.

This link has some detailed explanation

https://css-tricks.com/almanac/properties/b/background-size/ ( check out related article links)
https://css-tricks.com/almanac/properties/b/background-image/

Hope this helps :)

Cheers!
Vinay Kashyap

• This reply was modified 8 years, 8 months ago by Vinay.

Hi!

If it is the color section background image pease use stretch to fit.

if it is an image set as an background using custom css

please use background-size:cover; in your custom CSS below the image URL in CSS.

Best regards,
Vinay Kashyap