[Support request] hero image not showing

[Brandon]

Hi,

I am having a problem with a hero image. it won’t display on my website; just the text.

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 */

[Elvin]

Hi,

The link you’re provided doesn’t seem to exist anymore.

Was is suppose to appear on the other page as well? If yes, I don’t see it on the other pages’ DOM structure.

Can you provide more details on how you’re adding the hero section?

Tip: If I may suggest, consider using our Header Element in adding page hero section. Its great! 🙂
More about Header Element here – https://docs.generatepress.com/article/header-element-overview/

A wise man once said:
"Have you cleared your cache?"

[Brandon]

I made the page public for your review

I’m putting the CSS inline inside <style> brackets

I could try the “Header Element” but I think I am so close with this code

Thank you,

-Brandon

[Elvin]

Thanks.

Since the image is added as a background, its size is depending on the size of the div it is placed in.

The hero-image doesn’t show up because it had no height. And it didn’t have any height because its content is removed from the DOM flow when you applied position:absolute;.

Any reason why you had to use position:absolute to its content?

If you want to center the .hero-image contents, you can simply use:

.hero-image{
display:flex;
justify-content: center;
align-content: center;
}

Or use a simple text-align:center;

A wise man once said:
"Have you cleared your cache?"

[Brandon]

Thank you.

I had cut and pasted from a website.

Should I just delete position:absolute;

[Brandon]

Thank you again Elvin, I have made edits to CSS as you suggested here:

/* 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&#8221;);
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.hero-image{
display:flex;
justify-content: center;
align-content: center;
color:white;
}

/* hero image css */

The “family owned & operated” text is not centered. Do you have quick edit or should I try the “Add Elements” as you suggested?

Thank you,

-Brandon

[Elvin]

Should I just delete position:absolute;

You’ll have to remove these from .hero-text:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

and add in the properties I’ve mentioned on the previous reply on .hero-image.

A wise man once said:
"Have you cleared your cache?"

[Elvin]

The “family owned & operated” text is not centered. Do you have quick edit or should I try the “Add Elements” as you suggested?

You can add text-align: center; to your .hero-text selector. It should center the texts.

A wise man once said:
"Have you cleared your cache?"

[Brandon]

Thank you so much you are great. Helped me out tremendously!

I hate to push my luck but do you have any way for the text to go inside the container/background image? I may have to make it smaller for mobile view

Either way, thank you and excellent work!

-Brandon

[Brandon]

updated css note

/* 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&#8221;);
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.hero-text {
text-align: center;
color: white;
}

.hero-image{
display:flex;
justify-content: center;
align-content: center;
color:white;
}

/* hero image css */

[Elvin]

I hate to push my luck but do you have any way for the text to go inside the container/background image? I may have to make it smaller for mobile view

Sure. First we must slightly change your markup.

Change this:

<h2 style=”font-size:50px”>Connecticut’s Finest Movers</h2>
<p>Family owned & operated: New Haven County, CT</p>

to this:

<h2 class="hero-heading">Connecticut’s Finest Movers</h2>
<p class="hero-subheading">Family owned & operated: New Haven County, CT</p>

We can then use these selectors to have different font sizes depending on the viewport by using @media queries.

Example:

/* For desktop */
@media(min-width:1025px){
.hero-text h2.hero-heading{ font-size: 50px;}
.hero-text p.hero-subheading{ font-size: 20px;}
}
/* For tablets and smaller screened desktops */
@media(max-width:1024px) and (min-width:769px){
.hero-text h2.hero-heading{ font-size: 40px;}
.hero-text p.hero-subheading{ font-size: 17px;}
}
/* For small tablets and mobile phones not wider than 768px */
@media(max-width:768px){
.hero-text h2.hero-heading{ font-size: 26px;}
.hero-text p.hero-subheading{ font-size: 12px;}
}

A wise man once said:
"Have you cleared your cache?"

[Brandon]

Thank you so much.

Please one last thing and I will be on my way.

I am unable to change height for image. It seems stuck at a 50% level height even when I change the code in CSS to 70% or 100%. Do you have a fix for this?

/* 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&#8221;);
height: 70%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.hero-text {
text-align: center;
color: white;
}

.hero-image{
display:flex;
justify-content: center;
align-content: center;
color:white;
}

/* hero image css */

[David]

Hi there,

height % doesn’t work in that way, its fine if the parent container has a fixed height but in this case they do not.

Can you share a link to where i can see the hero ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Brandon]

Hi David,

Thank you for your explanation.

Here is a link: https://2brosandatruck.com/test/

The image seems scrunched at its height a bit

Thank you,

-Brandon

[Elvin]

Lets rework the CSS codes a bit.

Change this:

.hero-image{
display:flex;
justify-content: center;
align-content: center;
color:white;
}

To this:

.hero-image{
display:flex;
justify-content: center;
align-items: center;
color:white;
}

Also change the height: 70%; in .hero-image to a fixed value, (ex: height:300px) as percentage value gets weird.

While we can still try to use percentage values, it will be significantly more time consuming to do as we’ll have to trace back to the ancestor element.

Here’s a nice explanation regarding CSS height property:
https://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div/31728799#31728799

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts