[Resolved] Section: Background image not centered

[Roland]

Hi there,

I made a section without content but with a background image, a parallax, box type: full width, inner type: full width, padding: 50%.

My question: When I publish the page, everything works fine, but the image is not centered. It’s pushed to the right. How can I solve this? I wished the image would automatically fit entirely in the space between left and right border of the browser.

Are there any recommendations for the size of the background image? The mine is 3648 × 1635.

Sorry, I can’t link to the page because it’s maintenance mode.

Kind regards
Roland

[Leo]

Hi there,

If you want a section with only the image then I would recommend adding the image as the content instead of the using it as a background image. It would be better for responsive purpose as well.

Let me know if this works for you.

[David]

If you do want to center the section background image you can give the section a Custom class e.g db-bg and then add the following CSS. I use the Simple CSS plugin so you will have this Meta box on the page you are editing.

.db-bg {
background-position: center;
}

Your image size is overkill – just make it big enough to fill the biggest page you are using.

[Roland]

Hi there,

@Leo: Thank you for your reply. But adding the image as the content doesn’t really work. Okay, it’s centered. But I have paddings that I don’t want and there is no parallax.

@David: Thank you, works fine! 🙂

[Leo]

Thanks David!

[David]

Your welcome Roland. Good timing – took a 5 minute break from styling a 10 section page, which included just that!

[Author]

Posts