Лучший способ использовать целое изображение в качестве фона веб-сайта с использованием CSS и по-прежнему ориентироваться на экран разных размеров? (например, about.me) - PullRequest
Новая
       21

Лучший способ использовать целое изображение в качестве фона веб-сайта с использованием CSS и по-прежнему ориентироваться на экран разных размеров? (например, about.me)

6 голосов
/ 31 декабря 2011

В настоящее время я использую это:

HTML: 

<div id="container">
  <img src="x.jpg" id="bg" />
  <div id="content">
   <h1>Welcome to my website.</h1>
   <p>Boo!</p>
  </div>
</div>

CSS: 

#bg{
position:absolute;
top:0;
left:0;
height:100%;
z-index:10;
}

#container{
/* max values provided due to the max size of the image available with me(1200x800) */
max-width:1200px;
max-height:800px;
}

#content{
position:absolute;
top:10px;
left:100px;
z-index:100;
}

Преимущество здесь в том, что я вообще не использую Javascript. Но тогда абсолютно позиционированные элементы становятся кошмаром при просмотре на разных экранах.

В настоящее время у меня есть решение написать и расположить эти элементы в соответствии с различными размерами экрана (например, 1024x768 будет иметь верхнее значение содержимого id как 10px, тогда как 1280x800 будет иметь что-то вроде top: 25px; и т. Д.) И сохраните их как отдельный файл CSS, чтобы я мог загрузить соответствующий CSS во время загрузки страницы. Я чувствую, что это отнимает много времени и, вероятно, неэффективно. Использование процентных значений - это вариант, который я еще не исследовал. Если вы знаете об элегантном решении или о том, как это делают крупные парни из about.me, это поможет.

Спасибо.

1 Ответ

5 голосов
/ 31 декабря 2011

Вы пытались использовать background-image на body с одним из значений background-size?Вы можете использовать cover или, возможно, 100% 100% в зависимости от ваших потребностей.

Демо: http://jsfiddle.net/ThinkingStiff/UBaN6/

body {
    background-image: url('http://thinkingstiff.com/images/matt.jpg');  
    background-size: cover;  
    background-repeat: no-repeat;
}
...