Position image relative to another even by changing resolution

Question

Position image relative to another even by changing resolution

Navigation

#1 by (1 votes)

1

I have the logo and a black background triangle. How to position the logo to always stay in the center of the triangle even changing the resolution?

<imgclass="img-responsive triangulo-laranja" src="{{ asset('storage/triangulo.fw.png') }}">
<div class="img-responsive triangulo-logo">
    <img class="img-responsive logo" src="{{ asset('storage/logo.png') }}">
</div>

.triangulo-laranja {
position: absolute;
top: 0;
left: 0;
z-index: 997;
width: 85%;
height: 90%;
opacity: 0.85;
}

.triangulo-logo {
background-image: url('../../storage/triangulo-logo.fw.png');
position: absolute;
top: 0;
left: 8%;
z-index: 998;
width: 600px;
height: 200px;
}

.logo {
position: relative; 
top: 0;
left: 50%;
margin-left: -95px;
z-index: 999;
}

html5 css twitter-bootstrap

asked by anonymous 17.06.2017 / 19:20

1 answer

Push from the same file with different parameter in Git Function parameters not previously defined

score 1 · Accepted Answer

First, the problem is occurring because you are using position: absolute on both elements. By its explanation to a previous answer this black triangle is also an image as well as the logo.

One possible solution would be to create a div encompassing the logo and place the black triangle as a background image in that div that is embodying your logo. For example:

/*---- Código HTML ----*/

<div class="divlogo">
    <img class="logoimg" src="./img/logo.png" />
</div>

/*---- Código CSS ----*/

.divlogo{
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 998;
   width: 80%; 
   height: 30%;
   text-align: center;
   background-image: url("./img/tringulo-preto.png");
   background-size: 100%; /*Caso 100% não lhe agrade pode usar Cover*/
}

.logoimg{
   display: block;
   width: 50%;
   position: relative;
   z-index: 999;
}

Note : Adjust the size values of the elements according to your need. I hope this answer will help you.