Adding a layer to the headerclass image

Hey,
I’m not sure what your asking? Your wanting two background images on the same area?

Ben

Yes. Is that possible? The idea is that when the pages using the full-width header, (which are only the blog pages), are viewed on a mobile phone or other small screened device, the pic in the middle will not be displayed. As it is now, on a mobile phone the logo overlays her pic which is part of the background image.
Thank you-

The code below will just have a white background when the browser is below 992px. You could specify a different image instead of ‘none’ if you want to have an alternate image.

@media (max-width: 991px) {
.headerclass {
    backgournd-color: fff;
    background-image: none;
}
}

@media (min-width: 992px) {
.headerclass {
    background: #fff url(https://www.lifepathbydesign.net/wp-content/uploads/2016/02/BlogBanner.jpg);
}
}

Hi Dave. For some reason that didn’t work. I tried it with your code and using the variable call-outs I have in my CSS. The full-wdth header is only for the blog pages, not the rest of the site. I have a display none on headerclass set up for the whole site and then to display the headerclass image on specific pages I have:

.blog .headerclass,
.category-2 .headerclass,
.category-6 .headerclass,
.page-id-94 .headerclass,
.page-id-276 .headerclass,
.page-id-318 .headerclass,
.postid-1 .headerclass,
.postid-20 .headerclass,
.postid-219 .headerclass,
.postid-228 .headerclass,
.postid-263 .headerclass,
.postid-288 .headerclass,
.postid-310 .headerclass,
.postid-326 .headerclass,
.postid-404 .headerclass{
height: 250px;
background: #fff  url(https://www.lifepathbydesign.net/wp-content/uploads/2016/02/BlogBanner.jpg);
width: 100%;
background-repeat: no-repeat;
background-position: center;
{

It’s because your targets are more specific than than what I posted. On mobile now. I can take another look later if someone doesn’t help you sooner.

Give this a try. (Save a copy of your code in case my edit doesn’t work for you so you can put your edit back in)

Remove:

.blog .headerclass,
.category-2 .headerclass,
.category-6 .headerclass,
.page-id-94 .headerclass,
.page-id-276 .headerclass,
.page-id-318 .headerclass,
.postid-1 .headerclass,
.postid-20 .headerclass,
.postid-219 .headerclass,
.postid-228 .headerclass,
.postid-263 .headerclass,
.postid-288 .headerclass,
.postid-310 .headerclass,
.postid-326 .headerclass,
.postid-404 .headerclass {
height: 250px;
background: #fff  url(https://www.lifepathbydesign.net/wp-content/uploads/2016/02/BlogBanner.jpg);
width: 100%;
background-repeat: no-repeat;
background-position: center;
}

And replace it with:

@media (min-width: 992px) {
.blog .headerclass,
.category-2 .headerclass,
.category-6 .headerclass,
.page-id-94 .headerclass,
.page-id-276 .headerclass,
.page-id-318 .headerclass,
.postid-1 .headerclass,
.postid-20 .headerclass,
.postid-219 .headerclass,
.postid-228 .headerclass,
.postid-263 .headerclass,
.postid-288 .headerclass,
.postid-310 .headerclass,
.postid-326 .headerclass,
.postid-404 .headerclass {
height: 250px;
background: #fff  url(https://www.lifepathbydesign.net/wp-content/uploads/2016/02/BlogBanner.jpg);
width: 100%;
background-repeat: no-repeat;
background-position: center;
}
}

Hey,
I would suggest the media query route where you change the image based on screen size. You can “kind of” apply two background images by using a Pseudo element in css but it would be tricky to get right and hard for me to even attempt the css without having a link to the layer of the image that your wanting on top of the other image.

Kadence Themes

Dave Pittman-that worked! Thank you so much.
Thanks also to Kadence – It is a great theme and I realize I am stretching this Theme beyond its intended design. ??