Заполните середину снизу содержанием на фоновом изображении - PullRequest
Новая
       13

Заполните середину снизу содержанием на фоновом изображении

0 голосов
/ 10 февраля 2012

Я бы сделал следующее: У меня есть фоновое изображение (вверху по центру), и я бы наполнил его середину снизу содержимым. Я бы сделал что-то вроде http://glocalventures.org/. Примечание: размер можно изменить!

Как я могу сделать что-то подобное? Я использую Zurb Foundation как CSS Framework. Спасибо!

Ответы [ 2 ]

0 голосов
/ 11 февраля 2012

Установите изображение сверху, по центру: 

yourImage{
   background: #ffffff url(../images/bg.jpg) top center no-repeat;
}

Установите, куда идет текст: 

yourText{
    position: absolute;
    bottom: 5px;
    text-align: center;
}

и HTML-код для этого: 

<div id="yourImage">
    <p id="yourText">some text...</p>
</div>
0 голосов
/ 11 февраля 2012

Я не совсем уверен, что вы спрашиваете здесь. Я предполагаю, что вы говорите о создании фонового изображения, похожего на этот сайт?

Для управления фоновым изображением / положением фона с помощью CSS. Вы можете сделать что-то вроде этого: 

body {
background-image:url(../images/bg.jpg);
background-position: top center ;
background-repeat:none;
}

или вы можете использовать пиксели 

body {
background-image:url(../images/bg.jpg);
background-position: 100px 100px ;
background-repeat:none;
}

или если вы хотите проценты 

body {
background-image:url(../images/bg.jpg);
background-position: 50% 50%;
background-repeat:none;
}

, чтобы сделать его изменяемого размера, вы можете использовать это свойство CSS: 

background-size:100% 100%;

* Примечание. Это свойство CSS3, которое не будет работать в некоторых старых браузерах.

Если это не то, что вы ищете. Вы можете щелкнуть правой кнопкой мыши на их сайте, просмотреть их CSS с помощью исходного кода и посмотреть, как они это делают.

...