Add background image to Jupiter 4 WordPress Theme header

1 Views

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.

Read More

I’m trying to turn this:

plain header

into this:

header with a feature background image

Post Views: 1

Related posts

2 comments

  1. 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;
    }
}

  2. You need to remove the current background from the overlaying elements. Then you can add you background to the header and it will be seen.

    .mk-header-bg.mk-background-stretch,
.mk-header-toolbar {
    background: none;
}
.mk-header-holder {
    background-image: url('/myImage.jpg');
}

Comments are closed.