Блог

на моем веб-сайте: я использовал несколько @media запросов, чтобы получить разные фоны для разных решений. Моя проблема сейчас в том, что если вы перетащите окно с разрешением 1080p, но, например, только с разрешением 1024, вы увидите белые границы сверху и снизу.

Это нормально, поскольку изображение было рассчитано на высоту 768 пикселей, так что это не проблема.

Поскольку я не добавлял контейнер, потому что это было сложно для меня, я решил сделать контейнер на моем фоновом изображении. В связи с этим мне нужно использовать «исправленный» фон, чтобы он соответствовал адаптивному дизайну веб-сайта и сохранял соответствие.

Теперь мой вопрос: есть ли способ решить проблему с белой полосой? Это не имеет большого значения, так как вы их не видите, если вам подходит разрешение, но я бы не хотел делать, например, 1024×1200 изображений только для соответствия высоте. Я уверен, что такая картинка будет выглядеть плохо на экране 1024×768.

Вот код, который я использую:

 /* 1680x1050 ----------- */
@media only screen and (min-width : 1601px) and (max-width : 1680px) {
    /* Styles */
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        line-height: 1.42857;
        background: #f4f5f7 url('http://evoxity.net/themes/default-bootstrap/img/background/1680x1050.jpg');
        margin: 0;
        background-repeat:no-repeat;
        -moz-background-size:cover;
        background-size:fixed;
        overflow: auto;
        background-position:center;
        background-attachment:fixed;
    }
}