Archived topic
Adding background images (slider effect) in Home Hero Element?
4 replies · Started by Fitron on November 30, 2019
Halo team! I want to add a background image (slider effect) in the Home Hero Element, I have followed the guidelines HERE, but the look of a different home site makes my site look weird.
I just want to add a few pictures (maybe 4-5) on desktop & mobile, can someone help?
Hi there,
Can you apply David's method here so we can see the issue?
https://generatepress.com/forums/topic/insert-background-images-slider-effect-in-page-hero-element-without-plugin/#post-685231
Let me know :)
Thank you Leo for responding
Already implemented it with this drawn code: https://prnt.sc/q4iert and this CSS: https://prnt.sc/q4ieti
My site: wayangpedia.com
I just updated the CSS code, using this:
` .slider-hero {
position: relative;
}
.background-slider {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.inside-page-hero {
display: -ms-grid;
display: grid;
grid-template-areas: "left right";
-ms-grid-columns: 50% 50%;
grid-template-columns: 50% 50%;
}
.page-hero-content {
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: right;
}
@media (max-width: 768px) {
.inside-page-hero {
display: block;
}
}
@media (min-width: 768px) {
.hero-title {
position: absolute;
top: 50%;
right: 10%;
transform: translate3d(0%,-50%,0);
}
}
and setting these elements: https://prnt.sc/q4ja5f
Almost perfect, the mobile display "custom search & h1" as I want.
Now all that remains is to adjust the desktop display, can the team there help?
Is there a specific page where I can see this implementation?
I'm still just seeing a background image in the page hero on home page.
Let me know :)
