Jupiter Page Background Image Position

The Jupiter Page Background Image Position can be a challenge with certain images. Sometimes the background image added behind your page winds up looking horribly cut off. So how can we improve the Jupiter Theme background images?

Background Color & Texture

Jupiter only allows for general background-position directions. This can be done per page using the Background Color & Texture settings’ Background position buttons.
Background Color & Texture
There you can choose for 9 positions:
  • top left,
  • top center,
  • top right,
  • center left,
  • center center,
  • center right,
  • bottom left,
  • bottom center and
  • bottom right.
And this is a nice feature and is enough most of the time. But sometimes you simply need more control. And for that you need to add some nice CSS.

CSS Background Position

With CSS you can position the background image more fine grained with percentages or using a fixed amount of pixels. This allows you to position these images the way you want. Especially useful when you add portrait size images and need to make them fit and display well. You could make all these title background images taller to make things fit. But then at about 700px height they will take up too much space really. Visitors like images, but also need to be able to read text right away.

So what I did is add:

.page-template-default .mk-header {
background-repeat: no-repeat;
background-position: 20% 35%;

to the Visual Composer’s CSS for that page. This piece of CSS with your own choice of percentages for the background-position allows for you to tweak the background image position to your heart’s desire. I do hope we will be able to do this without CSS in the future with Jupiter but for now this seems to be the way to go.

Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.