- This topic has 5 replies, 2 voices, and was last updated 5 years, 5 months ago by
.
-
Posts
-
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?
Customer Support
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:
<h2 style=”font-size:50px”>Connecticut’s Finest Movers</h2>
<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 */Customer Support
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.
- You must be logged in to reply to this topic.
