Изображение не отображается полностью на фоне тела - PullRequest
Новая
       3

Изображение не отображается полностью на фоне тела

3 голосов
/ 16 августа 2011

Пример: http://jsbin.com/opokev/20

Полное изображение: http://i53.tinypic.com/347a8uu.jpg

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

Вопрос: Могу ли я что-то сделать с помощью CSS, чтобы показать все изображение, или мне нужно использовать Gimp или фотошоп, чтобы уменьшить мое изображение.В настоящее время это 1400 х 1050 пикселей.

Ответы [ 4 ]

3 голосов
/ 16 августа 2011

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

Этого можно добиться с помощью свойства background-size, которое вы уже использовали. Но вместо cover вы устанавливаете его на 100% 100%. Живой пример: http://jsbin.com/opokev/21/

body {
    background: url(http://i53.tinypic.com/347a8uu.jpg) no-repeat center fixed;
    background-position: 0px 85px;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}
0 голосов
/ 16 августа 2011

В вашем примере изображение вообще не показывается. Я подозреваю, что это потому, что вы используете postimage.org для размещения изображения, а они блокируют запрос изображения из внешнего домена (ваш пример). Если я подставлю URL-адрес изображения, размещенного на моем собственном сервере, фон изображения будет отображаться с использованием заданных вами атрибутов. Я бы предложил использовать другой образ хоста.

Используемый атрибут CSS3 background-size: cover; будет пропорционально масштабировать изображение, чтобы заполнить браузер, исходя из горизонтальной ширины. Не нужно предварительно масштабировать изображение, хотя это не всегда может дать вам самый красивый результат.

0 голосов
/ 16 августа 2011

Да, вы можете сделать некоторые трюки, используя HTML и CSS, но ваше изображение должно быть в теге:

CSS: 

  html, body, #body { height:100% }

  #body { position:relative }

  img {
    position:absolute;
    width:100%;
    height:100%;
    display:block;
    z-index:1;
  }

  div#masthead {
    background-color: #262626;
    height: 85px;
    padding: 0;
    width: 100%;
    margin: 0;
    z-index:2;
    position:relative
   }

HTML: 

<body>
  <img src="http://i53.tinypic.com/347a8uu.jpg">
  <div id="masthead"></div>
</body>

Проверьте jsbin: http://jsbin.com/izenah/edit#javascript,html

0 голосов
/ 16 августа 2011

CSS2 теперь позволяет масштабировать фоновые изображения. Вы можете использовать медиазапрос и представить другое изображение в зависимости от разрешения пользователя.

Кстати: кавычки не обязательны для параметров URL: 

    background-image: url(http://s1.postimage.org/gkkq9uc17/Sketch2.jpg);
...