How to create a responsive div on image?

Question

.container {
    border: 1px solid #DDDDDD;
    width: 200px;
    height: 200px;
    position:relative;
}
.tag {
    float: left;
    position: absolute;
    left: 0px;
    top: -10px;
    background-color: green;
}
.mytag {
    float: left;
    position: absolute;
    left: 60px;
    top: -10px;
    background-color: green;
}

<div class="container">
    <div class="tag">Featured</div>
     <div class="mytag">My list</div>
    <img src="http://www.placehold.it/200x200">
</div>

I'm trying to create a div on image, but i'm not able to create a responsive one.

I'm trying to create a replica of this website as i'm a beginner. I want to create the first section, which should be a responsive one (plan and design and our goal should be on the image) How can i achieve the same? check here

How to make it a responsive?

Answer 1

The website you have mentioned uses a background image, Here is an example of achieving it.

First create your wrapper div and then apply a background image for it. make it relatively positioned. Make the other child content boxes absolute positioned. so you can move them freely using top, left, right and bottom css acttributes within its parent

html

<div class="div-with-bg-img">
  <div class="content-div">
   content here
  </div>
</div>

css

.div-with-bg-img {
  width: 350px;
  height: 150px;
  background: url(http://via.placeholder.com/350x150);
  margin-top: 100px;
  position: relative;
}

.content-div {
  width: 100px;
  height: 50px;
  background: tomato;
  position: absolute;
  top: -10px;
  left: 40px;
}

if you want to make it responsive then apply relative measurement units

.div-with-bg-img {
    width: 100%;
    height: 150px;
    background: url(http://via.placeholder.com/350x150) no-repeat;
    margin-top: 100px;
    position: relative;
    background-size: cover;
    background-position: center;
}

Use media queries to make your website responsive

Here is an example code

@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

Few useful articles I found on web

List of media queries

What is RWD

If you just want to know how to make an image responsive here is a nice article published on css tricks

https://css-tricks.com/responsive-images-css/

You can use the browser dev tools to learn the website source codes :)