Integrating responsive webdesign with lot of background-images

Question

I'm new to front integrations with images.

How could I create one of the two panels in the following picture that would keep texts, buttons and headings at the right position when the user stretches the window ?

I thought about different approaches to accomplish it:

Using a single picture as a background and relatively positioning texts for heading, content and clickable area of the panel as absolute divs.

Or cutting heading, button and panel images and make them divs with their respective background-image and position the div themselves with text inside them.

Here is a picture of the result I would like to achieve:

Images I got:

Full panel:

And I have also the banner, the background and the button separately.

Maybe there's another way to integrate I didn't think about ?

Every approaches is welcome :)

Thanks for your help !

Answer 1

I took your image and added a header, description and a button. The positioning can be done very easily. The container with flex is for the responsive design (the divs wrap). Run code snippet and resize the window to see:

/* Padding: 0; for no padding in the edges */

* {
  padding: 0;
}

#container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: #654321;
}

/*
  This content is for the mobile version START
*/

.image {
  position: relative;
  text-align: center;
  margin: 1em;
}

.imageHeader {
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.imageText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.imageButton {
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  font-size: 20px;
  background: none;
  border: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

img {
height: auto;
}

/*
  This content is for the mobile version END
*/

/*
  media only screen with min-width for mobile first! 
  
  The code below is for the Computer Version!!!
*/

@media only screen and (min-width: 800px) {

.image {
  position: relative;
  text-align: center;
  margin: 1em;
}

.imageHeader {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.imageText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.imageButton {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  font-size: 20px;
  background: none;
  border: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
img {
height: 500px;
}
}

<div id="container">

  <div class="image">
    <h2 class="imageHeader">Header</h2>
    <img src="https://i.sstatic.net/vHqR7m.png">
    <p class="imageText">Description</p>
    <button class="imageButton">Buy $2.99</button>
  </div>
  
  <div class="image">
    <h2 class="imageHeader">Header</h2>
    <img src="https://i.sstatic.net/vHqR7m.png">
    <p class="imageText">Description</p>
    <button class="imageButton">Buy $2.99</button>
  </div>
  
</div>