Блог

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

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

#html #css #background

#HTML #css #фон

Вопрос:

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

 <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 пикселей фонового изображения скрыто под разделом «верхний заголовок», высота которого составляет 50 пикселей (это меню). Как мне настроить код так, чтобы фоновое изображение отображалось правильно, полностью под меню (верхний заголовок)?

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

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

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

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

Комментарии:

1. Я этого не сделал. Другие сделали. Я не осознавал свою ошибку, пока не обнаружил, что эта тема закрыта. Я действительно не знаю, как я оказался здесь, когда я вошел в StackOverflow: (

2. Мне нравится, когда люди решают свои собственные проблемы. Итак, ваш ник кажется неправильным :-). Удачи и увидимся.

3. @Gerben спасибо за добрые слова!

Ответ №1:

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

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

Приветствия!

Ответ №2:

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

 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;
}

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