How to align a hero-image with on using html and css?

DarthCoursucant
October 27, 2023
210 views
0 votes
2 Answers

I want to have two hero-images on the same page (index page) and I was wondering how can I align them. Since I want them to be at the same height, I want them to be in the centre with around 50px separation from each other under the header.

will the flex property work hero-images ?

HTML CODE

<div class="hero-image1">
  <div class="hero-text1">
    <h1>Our Bestsellers</h1>
    <a href="bestsellers.html"><button>Bestsellers</button></a>
  </div>
</div>

<div class="hero-image2">
    <div class="hero-text2">
        <h1>Our New Arrivals</h1>
        <a href="newarrivals.html"><button>New Arrivals</button></a>
    </div>
</div>

CSS CODE

.hero-image1 {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://galacticsabers.co/wp-content/uploads/2023/08/mattgallodesigns_the_planet_naboo_from_star_wars_hyper_realism__92ca62a7-f8f0-458f-a6a7-49c3120150de-1024x574.png");
    padding-left: 20px;
    margin: 20px;
    justify-content: left;
    align-items: left;
  }

  .hero-image2 {
    padding-left: 20px;
    margin: 20px;
    justify-content: right right;
    align-items: right right;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://i.pinimg.com/originals/00/84/89/0084892bd1326bdcb2cc597820af2fdf.png")
  }

  .hero-image1, .hero-image2 {
    width: 300px;
    height: 200px;
    border-radius: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  /* Place text in the middle of the image */
  .hero-text1, .hero-text2 {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }

I’ve tried using the "justify-content" property and the "align-items" property which Google told me would work but it didn’t.

I also tried to align them in the most stupid way possible by using padding and margin but all that did was to mess with the rest of the page

Tags: css html

Answers

Embed your items inside a flex container.

A simplified example might be:

.flex-parent {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  gap: 20px 5px;
}

.flex-parent div {
  background-color: gray;
}

<div class="flex-parent">
    <div class="hero-image1">
      <div class="hero-text1">
        <h1>Our Bestsellers</h1>
        <a href="bestsellers.html"><button>Bestsellers</button></a>
      </div>
    </div>

    <div class="hero-image2">
       <div class="hero-text2">
         <h1>Our New Arrivals</h1>
         <a href="newarrivals.html"><button>New Arrivals</button></a>
       </div>
   </div>
</div>

Mozilla has some good documentation at https://developer.mozilla.org/en-US/docs/Web/CSS/flex

.hero-image1 {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://galacticsabers.co/wp-content/uploads/2023/08/mattgallodesigns_the_planet_naboo_from_star_wars_hyper_realism__92ca62a7-f8f0-458f-a6a7-49c3120150de-1024x574.png");
    padding-left: 20px;
    margin: 20px;
    justify-content: left;
    align-items: left;
  }

  .hero-image2 {
    padding-left: 20px;
    margin: 20px;
    justify-content: right right;
    align-items: right right;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://i.pinimg.com/originals/00/84/89/0084892bd1326bdcb2cc597820af2fdf.png")
  }

  .hero-image1, .hero-image2 {
    width: 300px;
    height: 200px;
    border-radius: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  /* Place text in the middle of the image */
  .hero-text1, .hero-text2 {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }

<div style="display:flex;justify-content:center;">
  <div class="hero-image1">
    <div class="hero-text1">
      <h1>Our Bestsellers</h1>
      <a href="#"><button>Bestsellers</button></a>
    </div>
  </div>

  <div class="hero-image2">
      <div class="hero-text2">
          <h1>Our New Arrivals</h1>
          <a href="#"><button>New Arrivals</button></a>
      </div>
  </div>
</div>

All you need to do is include a parent div so it can include both of your hero-image divs, and then you can align them as you would like

Please signup or login to give your own answer.

Click here to cancel reply.