JavaScript - Исправить изображение независимо от размера окна

Question

Изображение перемещается в зависимости от размера экрана, я хотел бы исправить его на верхней середине. Как мне это сделать? Вот 2 скриншота объясняющие:

HTML:

<div class="logo"></div> 

CSS:

.logo { 
    background:url(../img/logo.png) no-repeat; 
    position:absolute; 
    display: inline-block; 
    left:50%; 
    top:30%; 
    height:120px; 
    width:175px; 
    margin:-115px 0px 0px -112px; 
} 

Answer 1

Вы можете использовать перевод:

.logo { 
    position: absolute; 
    left: 50%; 
    transform: translate(-50%, 0); 
    height:120px;     
    width:175px;  
    background:url(../img/logo.png) no-repeat; 
} 

jsFiddle

Answer 2

Вы можете использовать функцию calc в CSS.

Измените размер окна, чтобы увидеть его эффект (в полноэкранном режиме).

.logo{ 
 
    position: absolute; 
 
    width: 175px; 
 
    height: 120px; 
 
    top: 30%; 
 
    left: calc(50% - (175px/2)); /* 50% parent width - half_of_image_width */ 
 
    
 
    border: 1px solid red; 
 
} 
 

 
.container{ 
 
    position: absolute; 
 
    width: 90%; 
 
    height: 90%; 
 
    
 
    border: 1px solid black; 
 
}

<div class="container"> 
 
    <div class="logo"></div> 
 
</div>