0

I'm trying to place 2 images side to side and have some text in the center of both images, but after adding the first image in CSS with background :(url) , I cannot add a second image because it just overrides the first one and I put images directly in a div , I cannot place text inside them.

As you can see in the below HTML that if I put one image in HTML and I through CSS, I cannot place text over it and if I place it in the CSS ,they just override each other.

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>
TheZ
  • 3,663
  • 19
  • 34
ChDrY322
  • 27
  • 6
  • 1
    Check this post. It has exactly what you want https://stackoverflow.com/questions/65937358/how-to-have-to-background-images-side-by-side-in-css/65937571#65937571 – Nick Pantelidis Jan 29 '21 at 10:08
  • Does this answer your question? [How to have to background images side by side in CSS](https://stackoverflow.com/questions/65937358/how-to-have-to-background-images-side-by-side-in-css) – Nick Pantelidis Jan 29 '21 at 10:43

1 Answers1

1

Screenshot Just replace your code with this.

Use a section tag selector in css

section{
  height: 400px;
  background-color: black;
  background-image: 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>
TheZ
  • 3,663
  • 19
  • 34
Wajid
  • 593
  • 3
  • 11
  • You can also use with #images(id of section) just put background-image instead of background – Wajid Jan 29 '21 at 10:16
  • Hi and welcome to SO. An anwser must always contain a sufficient explantion. Your explanation must explaing your solution and how it works so it is reproduciable. Question shave to be anwsered not only with the OP in mind but the entrie So community for users that seek solutions for simliar cases. – tacoshy Jan 29 '21 at 11:01