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(http://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(http://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(http://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(http://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. 🙂
