I am looking to display two hero images on the index page and wondering how to align them. My goal is to have both images centered with 50px separation under the header, ensuring they are of equal height.
Will using the flex property work for hero images?
.hero-image1 {
/* Add a darkened background effect using linear-gradient for better text readability */
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;
/* Center text within the image */
.hero-text1, .hero-text2 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}<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>I attempted to use the "justify-content" and "align-items" properties as suggested by Google, but it did not produce the desired results.
I also tried aligning the images using padding and margins in an unconventional way, but that only caused issues with the rest of the page layout.