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

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

2 голосов
/ 06 марта 2012

Итак, я делаю макет для форума SMF, и фоновое изображение идеально центрируется, когда окно браузера достаточно широкое. Однако, когда я начинаю сжимать окно браузера, фоновое изображение начинает двигаться влево. Вот мой текущий CSS для фона: 

body
{
    background: #fefff1 url(../images/img/bg.gif) no-repeat;
    background-position:top center;
    margin: 0 auto; 
    color: #7C3C4A;
    padding: 0px 5%;
    font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
}

Вот скриншот форумов, чтобы вы могли лучше его визуализировать:

http://i.imgur.com/49pRI.png

Ответы [ 2 ]

6 голосов
/ 06 марта 2012 
body
{
    background-color: #fefff1;
    background-image: url(../images/img/bg.gif);
    background-position: center center; /* First value is from left and second is from top. You can use use number as well*/
    background-repeat:no-repeat;
}​
1 голос
/ 06 марта 2012

Ваш код кажется верным.

Единственное, что я сделал, это объединил background-position в один и тот же атрибут background вверху, например: 

body {
    background: #fefff1 url(../images/img/bg.gif) no-repeat top center;
    margin: 0 auto; 
    color: #7C3C4A;
    padding: 0px 5%;
    font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
}

Вот его JFiddle - JFiddle Link

...