Как получить маржу для фонового изображения? - PullRequest
Новая
       0

Как получить маржу для фонового изображения?

4 голосов
/ 16 октября 2011

Ниже приведена структура кода моего сайта. 

<body class="xxx">
    <div id="top-header">... code ...</div>
    <div id="wrapper">... code ...</div>
</body>

И это код CSS, который я использую для фонового изображения. 

body {
    background-image: url('http://example.com/background-image.jpg');
    background-position: top right;
    background-repeat: repeat;
}

Проблема, с которой я столкнулся, заключается в том, что около 50 пикселей фонового изображения скрыто под div "top-header", высота которого составляет 50 пикселей (это меню). Как настроить код так, чтобы фоновое изображение отображалось правильно, полностью под меню (верхний колонтитул)?

Просто, вы знаете, я пробовал и этот код CSS: 

#wrapper {
    background-image: url('http://example.com/background-image.jpg');
    background-position: top right;
    background-repeat: repeat;
}

И это изменило белый фон моего контента на изображение. Что не то, что я хочу.

Единственный способ - переместить начальную точку фонового изображения на 50 пикселей вниз. Как мне это определить? Пожалуйста, попробуйте помочь. Спасибо.

Ответы [ 2 ]

3 голосов
/ 23 октября 2011

Извините, ребята, это было легко.Я на самом деле следовал CSS, который Twitter использует для фона, и я понял.Мне просто нужно было заменить «верхний правый» на «правый 50px», где 50px равен размеру, который вы хотели бы оставить в верхней части фонового изображения. 

body {
    background-image: url('http://example.com/background-image.jpg');
    background-position: right 50px;
    background-repeat: repeat;
}

ура!

0 голосов
/ 04 ноября 2016

используйте это в стиле: 

background-position: calc(100% - 30px) center;

пример: 

body {
    background-image: url('http://example.com/background-image.jpg');
    background-position: calc(100% - 30px) center;
    background-repeat: repeat;
}

вместо 30px вы можете изменить значение в пикселях для размещения фонового изображения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...