CODEWITHSUNDEEP
htmlcss
John Smithe
John Smithe

Reputation: 45

Text position fixed over image

I have this sample:

link

.header{
    background-image:url("http://orange.motorcitynewengland.com/img/bg/jeep-renegade.jpg");
    width:1920px;
    height:616px;
    background-size:contain;
}
span{
  font-size: 21px;
    color: white;
    position: absolute;
    left: 56%;
    transform: rotate(33deg);
    top: 86px;
}
<div class="header">
   <span>Low mileage</span>
</div>
I want to position the text on the blue. The problem is that if you resize the browser, the text goes awry.

I want to keep the element position regardless of the browser size. You please tell me how to do this?

Thanks in advance!

Upvotes: 1

Views: 4074

Answers (3)

Gaslan
Gaslan

Reputation: 808

if the inner element is absolute, outer element must be relative to position relative to outter element.

.header{
    background-image:url("http://orange.motorcitynewengland.com/img/bg/jeep-renegade.jpg");
    width:1920px;
    height:616px;
    background-size:contain;
    position: relative;

}
span{
    font-size: 21px;
    color: white;
    position: absolute;
    left: 56%;
    transform: rotate(33deg);
    top: 86px;
}
<div class="header">
   <span>Low mileage</span>
</div>

Upvotes: 0

Vadivel S
Vadivel S

Reputation: 660

.header{
    background-image:url("http://orange.motorcitynewengland.com/img/bg/jeep-renegade.jpg");
    width:1920px;
    height:616px;
    background-size:contain;
 
}
span{
  font-size: 19px;
    color: white;
    position: absolute;
   left: 105%;
    transform: rotate(33deg);
    top: 10%;
 
  

}
<div class="header">
   <span>Low mileage</span>
</div>

Upvotes: 1

Chiller
Chiller

Reputation: 9738

You must change the unit from % to px left: 650px

CSS Code:

 .header{
        background-image:url("http://orange.motorcitynewengland.com/img/bg/jeep-renegade.jpg");
        width:1920px;
        height:616px;
        background-size:contain;
    }
    span{
      font-size: 21px;
        color: white;
        position: absolute;
        left: 650px;
        transform: rotate(33deg);
        top: 86px;
    }

Working Demo

Upvotes: 1

Related Questions