InfiniteLoop InfiniteLoop - 7 months ago 72
HTML Question

Add background image to Jupiter 4 WordPress Theme header

I'm working on a site using a Jupiter 4 theme. Within the dashboard there are options to configure the header layout, but there is nothing there to add a background image to the header.

The stylesheet is located at themes/jupiter/stylesheet/css/styles.css. In it, I have tried putting a

background-image: url('/wp-content/uploads/2016/04/header-miami-beach-sign.png');
in different id definitions that start with #mk-header, but no image is displaying. The header background is just a solid white color.

I'm trying to turn this:

plain header

into this:

header with a feature background image

Answer

In jupiter 4 theme, everything is in Jupiter backend "theme options":

You can disable the toolbar and to set header height between 140px to 200px (or more if needed).

For styling go to "styling tab (or menu):

  • First, you can unset (or reset) white backgrounds (to transparent) in "header".

  • Then add in "backgrounds" section (selecting header area) you can set there your background image.

No need to overlap or add styles

Dont forget that Jupiter theme is responsive regarding your background imageā€¦

The most accurate way to solve issues with premium themes is reading documentation, searching over Jupiter support threads or asking on this support threads.

---- (update) ----

To set different images sizes you need to use CSS (this is just an example):

.mk-header-bg.mk-background-stretch {
    background: transparent url('/myImage-hd.jpg') no-repeat !important;
}
@media only screen and (max-width: 1024px) {
    .mk-header-bg.mk-background-stretch {
        background: transparent url('/myImage-big.jpg') no-repeat !important;
    }
}
@media only screen and (max-width: 768px) {
    .mk-header-bg.mk-background-stretch {
        background: transparent url('/myImage-medium.jpg') no-repeat !important;
    }
}
@media only screen and (max-width: 588px) {
    .mk-header-bg.mk-background-stretch {
        background: transparent url('/myImage-medium-small.jpg') no-repeat !important;
    }
}
@media only screen and (max-width: 400px) {
    .mk-header-bg.mk-background-stretch {
        background: transparent url('/myImage-small.jpg') no-repeat !important;
    }
}
@media only screen and (max-width: 300px) {
    .mk-header-bg.mk-background-stretch {
        background: transparent url('/myImage-very-small.jpg') no-repeat !important;
    }
}