Держите фоновое изображение по центру даже при изменении размера окна - PullRequest
Новая
       0

Держите фоновое изображение по центру даже при изменении размера окна

4 голосов
/ 08 июня 2011

У меня есть контейнер div с другим div, центрированным внутри с фоновым изображением.

Когда я изменяю размер окна браузера, я хочу, чтобы изображение оставалось по центру, даже если ширина окна браузера меньше ширины изображения.

Вот код:

CSS: 

.wrap {
    width:100%;
    height:357px;
    background-color:red;
    overflow:hidden;
    text-align:center;
}
.image {
    margin:0 auto;
    background:url('http://4.bp.blogspot.com/-GKx0A_H8DGE/Tb9bTBCC5pI/AAAAAAAAANc/jvjcjvuNmGk/s1600/wide-angle-lens-3-1.jpg') no-repeat;
    width:500px;
    height:357px;
}

HTML: 

<div class="wrap">
    <div class="image"></div>
</div>

Вы можете видеть, что при изменении размера браузера изображениеперестает «центрироваться» после того, как оно коснется левой части экрана.Что я хотел бы, так это по-прежнему видеть центр изображения, при этом левая сторона отсекается и, по существу, смещается за пределы экрана влево.Это возможно только с помощью CSS?Я также был бы заинтересован в решении JS, если это невозможно.

1 Ответ

6 голосов
/ 08 июня 2011 
.wrap {
    height: 357px;
    background-color: red;
    overflow: hidden;
    position: relative;
}
.image {
    position: absolute;
    left: 50%;
    margin-left: -250px;
    background:url('/image.jpg') no-repeat;
    width:500px;
    height:357px;
}
...