background images mobile responsive

[jcrombie]

i am using a background image in the “Call to action 2” section, and on mobile, it displays the left side of the picture that is mostly filler, the object is in the right section of the photo. is there a way to make the image respond for mobile screens or prioritize/choose what section of the photo displays on mobile?

[Hans (Support Admin)]

Hello,

Yes you can use CSS media queries to accomplish this,

Media Queries for Standard Devices

For example:

@media (max-width: 767px) {
.calltoaction2 {
background-position: center -215px;
}
}

[naomy]

Hi Hans,
I have the same problem. The background impage of “Welcome” is not total visible on a phone. Can you let me know where i should put the CSS code?

I dont understand why the CSS code is not working. I also try to change the width of the contact
form 7 but the template is not recponding to my CSS.

I hope you have some advice.

I had put the code in the ” Custom CSS”

i’m using the template Parallel pro 1.2.1.1

• This reply was modified 4 years ago by naomy.

[Hans (Support Admin)]

Hello @naomy

The background images for all sections are response but it also depends on the dimensions of the images you are using.

For example if you are using an image which is more rectangular parts of it will be cut off on mobile devices but it will center the image.

Can you provide a link to your site so I can have a look?