How do I offset an image with absolute position in css?

user_13860529 0
Viewed 145

I need to recreate this -

Required design

but the nearest I can get is this

Best I can do

If I try and apply left/right value to the image, it goes all over the place. I know it has something to do with overflow, but I cannot work out what exactly. I tried it as a background-image rather than actually inserting an image, but I need that transparency. Here's the code. Where am I going wrong? I should add it still needs to be responsive.

.quotebox {
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  width: 70%;
}

.quote {
  font-size: 2rem;
  font-weight: 600;
  line-height: 3rem;
  width: 90%;
  padding: 2.5rem 0.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.quotebg {
  opacity: 0.1;
  position: absolute;
  height: 20%;
}
<div class="quotebox">
  <img class="quotebg" src="images/quotes.svg" alt="" />
  <blockquote class="quote">
    Neque id lacus, fringilla diam urna. Interdum facilisi aenean quis maecenas suspendisse maecenas orci.
  </blockquote>
</div>

css html
2 Answers

You could use transform : translateX(), the great thing about translate is that it will always move according to your element even if it uses position:aboslute, whereas left or right property will use the percentage of the relative parent element.

Also don't forget to set .quotebox to relative to keep your element inside its parent.

.quotebox {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  width: 70%;
}

.quote {
  font-size: 2rem;
  font-weight: 600;
  line-height: 3rem;
  width: 90%;
  padding: 2.5rem 0.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.quotebg {
  opacity: 0.1;
  position: absolute;
  height: 20%;
  transform: translateX(-50%); // negative value to move to the left, positive to the right
}
user_150981220

you can use left value to move the image like this:

.quotebox {
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  width: 70%;
}

.quote {
  font-size: 2rem;
  font-weight: 600;
  line-height: 3rem;
  width: 90%;
  padding: 2.5rem 0.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.quotebg {
  opacity: 0.1;
  position: absolute;
  height: 20%;
  left:20%;
}
<div class="quotebox">
  <img class="quotebg" src="https://i.stack.imgur.com/hix5K.png" alt="" />
  <blockquote class="quote">
    Neque id lacus, fringilla diam urna. Interdum facilisi aenean quis maecenas suspendisse maecenas orci.
  </blockquote>
</div>

user_149717840
Related