My goal is to display two images side by side with text centered between them. However, when I add the first image using CSS and the background property, I run into issues adding a second image as it overrides the first one. Placing the images directly in a div prevents me from placing text inside them.
In the provided HTML code below, you can see that when I place an image in the HTML itself and attempt to style it with CSS, I encounter difficulties in placing text over it or preventing the images from overriding each other.
Here's the snippet of the HTML and CSS:
#image{
height: 400px;
background-color: black;
background: url("https://www.dizzion.com/wp-content/uploads/2017/06/Working-on-Laptop-x1200-1024x683.jpg");
}<section id="images">
<h1>affortable shit</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quae nisi aliquid, saepe eaque ad repudiandae hic minus commodi tempore.</p>
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="">
</section>