You want a different image for every article? You would have to use css and page-id’s for every page. Is that what you mean? You can set the default header image in theme options > page title.
Just an fyi, the premium version has an option to change the header image for every page/post.
Hannah
I would like to have the same image for all my blog articles. So I can set it in theme options > page title ?!
I will try it.
Great, many thxs Hannah !
Ah sorry, It does not work…
Because I did not notice but it has changed also my background image on HP…
So how can i do it please ?
Thanks for your help !
Hey,
Your posting in a resolved topic. IN the future just create a new topic so we can see that it needs to be answered.
You can set the theme options > page title and set a separate option for your home page in the theme options > home slider.
For more control then that where you can set it on a page by page basis you would need the premium theme.
Kadence Themes
Ok for the create a new topic. Sorry but it is the same subject, not resolved, that I opened myself.
For your solution, it does not work perfectly because when I put the image 1 in theme options > page title and the image 2 in theme options > home slider. I have my image 1 in my blog articles (it is ok for that) and I have also my image 2 in my HP (it is ok for that). But I lose my CSS style for HP to be responsive
Here my code. How can I do it and keep my CSS effective ?
I tried to add “!important” after the field “background-image”
@media screen and (max-height: 850px) { /* ordi portable + tablette */
.kad-desktop-slider { /* image de la page Accueil */
background-image: url("http://lapousse.fr/wp-content/uploads/2015/05/HP.jpg");
background-size: cover;
background-position: left center;
background-repeat: no-repeat;
height: 300px;
}
}
@media screen and (min-width: 1024px) { /* desktop */
.kad-desktop-slider {
background-image: url("http://lapousse.fr/wp-content/uploads/2015/05/HP.jpg");
background-size: cover;
background-position: left center;
background-repeat: no-repeat;
height: 800px;
}
.home-page-title { /* desktop > titre de la page Accueil*/
text-align: left;
margin-left: 32%;
margin-bottom: 0px !important;
color: #ffffff !important;
font-weight: bold;
padding: 5px 20px 5px 20px;
background: #b43b3b;
display: inline-block;
}
.home-page-subtitle { /* desktop > sous-titres de la page Accueil */
text-align: left;
margin-left: 36%;
font-size: 20px !important;
padding: 5px 10px 5px 10px;
background: #b43b3b;
display: inline-block;
}
}
@media screen and (max-width: 1023px),
(min-device-width: 680px) and (max-device-width: 1023px) { /* tablette */
.kad-desktop-slider { /* image de la page Accueil */
background-image: url("http://lapousse.fr/wp-content/uploads/2015/05/HP.jpg");
background-size: cover;
background-position: left center;
background-repeat: no-repeat;
height: 300px;
}
.home-page-title { /* tablette > titre de la page Accueil*/
text-align: right;
font-weight: bold;
padding: 0px 0px;
margin-top: 0px;
}
.home-page-subtitle { /* tablette > sous-titres de la page Accueil */
text-align: right;
padding: 0px 0px;
}
}
@media screen and (max-width: 679px) { /* mobile */
.kad-desktop-slider {
background-image: url("http://lapousse.fr/wp-content/uploads/2015/05/HP.jpg");
background-size: cover;
background-position: left center;
background-repeat: no-repeat;
height: 200px;
}
.home-page-title { /* mobile > titre de la page Accueil*/
text-align: left;
padding: 0px 0px 0px 0px;
margin-top: 0px;
font-size: 40px
}
.home-page-subtitle { /* mobile > sous-titres de la page Accueil */
text-align: left;
padding: 0px 0px 0px 0px;
display: none;
}
}
1. I was only saying that this topic is “marked as resolved” so we can pass over it. Just trying to help since you had to wait three days for a response. and explaining why that happened.
2. I think I’m missing something… Why add an image in the theme options > home slider if your just wanting to override it with your custom css? Just leave that setting off?
Or if you want to override still change “background-image” to “background” in your css and add !important;
Kadence Themes
