Archived topic
Page hero image not showing
5 replies · Started by Johanna on December 4, 2018
I am migrating page headers to Elements and the hero (that contains basicallu just one big image) is not showing up at all. Looking at the sourcecode the html and css are there for it, but for some reason the height of the image is 0. Legacy page headers work without problems on the same site.
Any ideas?
Hi there,
so for the Element hero you have a background image. This needs some padding to be displayed. So for that image size without any content i would add 50% top padding.
Aah, I see now.
Thanks David!
You're welcome, glad we could be of help
Hi,
I am having the same problem on my page:
https://2brosandatruck.com/test/
The image is not showing on the live webpage, but it does show in dreamweaver source. Can you please help me with the CSS code?
image is 1998 pixels width X 348 pixels length
HTML:
<p>Family owned & operated: New Haven County, CT</p>
CSS:
/* hero image css */
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://2brosandatruck.com/wp-content/uploads/2020/11/NewHavenSkyline2000x.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.hero-text button:hover {
background-color: #555;
color: white;
}
/* hero image css */
Hi Brandon,
As the original topic is already resolved, can you open a new topic for the separate question so it’s easier for us to track?
We'll make sure it gets addressed. Thank you.
