[Support request] hero image not showing

Home Forums Support hero image not showing

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1519816
    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 */

    #1519825
    Elvin
    Staff
    Customer Support

    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?"

    #1519827
    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

    #1519832
    Elvin
    Staff
    Customer Support

    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?"

    #1519833
    Brandon

    Thank you.

    I had cut and pasted from a website.

    Should I just delete position:absolute;

    #1519875
    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

    #1519876
    Elvin
    Staff
    Customer Support

    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?"

    #1519877
    Elvin
    Staff
    Customer Support

    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?"

    #1519878
    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

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

    #1519881
    Elvin
    Staff
    Customer Support

    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?"

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

    #1522406
    David
    Staff
    Customer Support

    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 ?

    #1522750
    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

    #1523081
    Elvin
    Staff
    Customer Support

    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?"

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.