css масштабированное фоновое изображение - PullRequest
Новая
       6

css масштабированное фоновое изображение

4 голосов
/ 24 апреля 2011

я могу получить изображения, масштабированные для заполнения окна, когда они являются содержимым, например: (без html5 или div) 

  <style type="text/css">
img {
width:100%;
height:100%;
margin:0px;
}
  </style>

и 

<img src="wacard.png" alt="original image" title="">

, но

это терпит неудачу (как "html, body", так и просто "body") 

  <style type="text/css">
body {
width:100%;
height:100%;
margin:0px;
}
  </style>

и 

<body
 style="background-image: url(wacard.png);">
</body>

как взято отсюда взято: ResizeHTML5-холст под окно но насколько я понимаю, в нем должен быть какой-то более причудливый код, чем я знаю, или ... или я делаю что-то не так ...

какя могу получить фоновые изображения в масштабе?(в идеале, без JavaScript)

Ответы [ 4 ]

8 голосов
/ 24 апреля 2011

Вот отличное руководство с несколькими решениями: http://css -tricks.com / perfect-full-page-background-image / В комплекте с демонстрациями и пошаговым процессом кодирования.

Упомянутый способ HTML5: 

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

В статье упоминается исправление ie.

1 голос
/ 24 апреля 2011

Как я понимаю, вы хотите создать полноразмерный фон с изменяемым размером.Если это так, следуйте инструкциям здесь => http://css -tricks.com / perfect-full-page-background-image /

0 голосов
/ 26 июня 2019

afaict, с добавленным фоновым изображением

например, background: url(back.jpg) fixed;

все, что необходимо для его масштабирования, это 

background-size: cover;

меньше - больше.;)

0 голосов
/ 31 октября 2013

Также рассмотрим для дальнейшего просмотра и варианты, как в моем случае, значение 

background-position:

опций настройки ...

http://developer.mozilla.org/en-US/docs/Web/CSS/background-position

итакже 

background-origin:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

, которые сопровождают настройку стиля CSS backbackground-image.

...