Add background image to masthead (PRO + Renew)

Support
#1

Hi,

Im trying to add a background image to my masthead but nothing happened. I’m using the following css:

.masthead {
background-image: url(http://localhost:8888/wp-content/uploads/2018/05/header-1.jpg) !important;
background-size: auto !important;
background-position: top right !important;
background-repeat: no-repeat !important;
}

Is there anything else that i should do?

Thanks in advance,
David

#2

Hi There,

Thanks for asking!

Can you please try adding this CSS and let us know how this goes!

.x-navbar {
    background-color: transparent;
}

Hope this helps!

#3

Hi,

No, does’t work. :confounded:

.x-navbar {
background-color: transparent;
}

.masthead {
background-image: url(http://localhost:8888/wp-content/uploads/2018/05/header-1.jpg) !important;
background-size: auto !important;
background-position: top right !important;
background-repeat: no-repeat !important;
}

Cheers,
D.

#4

Hello @figu78,

Thanks for asking. :slight_smile:

Please note that Logobar and Navbar must be transparent to display masthead background. To do so, please add following CSS under Pro > Theme Options > CSS:

.x-logobar, .x-navbar {
background-color: transparent !important;
}

Next, you can add following CSS under Pro > Theme Options > CSS to display background image in masthead:

header.masthead {
    background-image: url(IMAGE-PATH);
}

Please replace IMAGE-PATH with URL of image. Kindly let us know how it goes.

I see that in image path you are using Localhost. Does that mean you are developing website locally? In case your website is online, kindly share the URL with us if above solution does not works out.

Thanks.

#5

Hi,

Nope, everything is transparent over the header but nothing happened.

If I look the in inspector, .masthead don’t have any of the css lines i wrote. Adding background-image in the inspector, works fine

My style.css file looks like this:

/*

Theme Name: Pro – Child Theme
Theme URI: http://theme.co/pro/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to Pro in this child theme.
Version: 1.0.0
Template: pro

*/

.x-logobar, .x-navbar {
background-color: transparent !important;
}

header.masthead {
	background-image: url(http://localhost:8888/wp-content/uploads/2018/05/header-1.jpg) !important;
	background-size: auto !important;
	background-position: top right !important;
	background-repeat: no-repeat !important;
}

Cheers,
D.

#6

Hello D,

Please update your css and use this:

.x-logobar, .x-navbar {
background-color: transparent !important;
}

.x-masthead {
	background-image: url(http://localhost:8888/wp-content/uploads/2018/05/header-1.jpg) !important;
	background-size: auto !important;
	background-position: top right !important;
	background-repeat: no-repeat !important;
}

Since you are using Pro theme, you might need to add the background image in your bar settings which is possible if you only have one bar.

Hope this helps.

#7

Thanks, It´s working!