2012-03-23 2 views
1

У меня есть веб-сайт, который я делаю для этого, нужен фоновой матрица. В настоящее время я использую Supersized для таких сайтов. Но этот сайт уникален. Проблема с Supersized заключается в том, что она всегда изменяется на весь экран и является фиксированным фоном.Фоновый размер для браузера, не исправлен

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

Например, если у меня есть изображение размером 600 пикселей x 600 пикселей, я хочу, чтобы оно изменялось на веб-сайте, чей браузер имеет ширину 1200 пикселей и теперь составляет 1200 пикселей x 1200 пикселей. Даже если высота веб-сайта составляет 1800 пикселей (с прокруткой). И он остается в верхней части страницы (абсолютная позиция, а не фиксированная). Таким образом высота 1200px сайта будет изображением, а оставшиеся 600 пикселей в нижней части сайта будут такими, какими бы ни был установлен стиль фона для тела.

Возможно ли это?

ответ

2

Я верю, что вы ищете свойство css3 background-size. Предполагая, что вы хотите, чтобы установить фоновое изображение в DIV, что вам нужно будет сделать ширину и фон-размер, который Див в 100%, и установить фоновое изображение, чтобы не повторять:

#background_image { 
    width: 100%; 
    background: url('path/to/image.jpg') no-repeat red; 
    background-size: 100%; 
}​ 

Посмотрите: http://jsfiddle.net/PgnvQ/

+0

Точно, что я искал, спасибо! – Nicole

+0

Атрибут background-size является правильным, но я считаю, что ключевое слово 'cover' должно быть лучше. Во всяком случае, недостатком этого метода, как правило, является отсутствие поддержки IE <9 – franzlorenzon

Смежные вопросы