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

Question

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

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

Answer 1

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

Для управления фоновой фотографией/фоновой позицией с помощью 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 с помощью исходного кода и посмотреть, как они это делают.

Answer 2

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

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>