[Resolved] Sections add-on

[Michal Janata]

Hello,

I have a problem with the section add-one.

Background image is not centered. On different monitors it looks different.

How it should look like
https://drive.google.com/open?id=0BxqENvliGlagTkN0Skh5YkRhamM

It does not look like this
https://drive.google.com/open?id=0BxqENvliGlagLVgzd2NXZEpCd1U

The site’s address is http://tancovani-test.skauting.cz/

I need to give set centering background. It’s something to do?

thank you for answer

[Andy]

You would have to create another narrower version of your background image and then swap out the original for the new one using CSS, the code below would change the image for Tablet (portrait) and smaller:

@media screen and (max-width: 768px) { 
#generate-section-1 { background-image: url(http://tancovani-test.skauting.cz/wp-content/uploads/2016/08/new-bg.jpg); }

}

[Tom]

In most cases you need to set an image specific to mobile as Andy has pointed out.

Alternatively, you can force it to be centered with this:

.generate-sections-container {
    background-position: center center;
}

[Michal Janata]

Great, thank you very much. Solved 🙂

[Tom]

You’re welcome 🙂

[Markus]

Helped me, too. Thank you.

[Tom]

Awesome 🙂

[Author]

Posts