Лучший способ для фона обложки кросс-браузера - PullRequest
Новая
       30

Лучший способ для фона обложки кросс-браузера

3 голосов
/ 05 мая 2011

У меня есть изображение размером 1024 * 768 пикселей, которое я хочу использовать в качестве фона для веб-страницы.

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

Я пробовал примеры здесь, кроме jquery - так как я хотел бы, чтобы это было лучше, если бы я делал только в css.

спасибо!

edit: вот ссылка: http://css -tricks.com / perfect-full-page-background-image /

Ответы [ 2 ]

2 голосов
/ 01 мая 2012

Вы можете попробовать плагин backstretch

Это однострочное решение javascript, просто включите его (также jquery) в заголовки и назовите его в качестве примера: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    // To attach Backstrech as the body's background
    $.backstretch("path/to/image.jpg");
</script>

Официальная страница: http://srobbin.com/jquery-plugins/backstretch/

Источник Github: https://github.com/srobbin/jquery-backstretch

0 голосов
/ 02 мая 2014

Я думаю, что старый добрый CSS может пригодиться для таких вещей. Это хорошо работает на настольных браузерах и моем iPhone / iPad: 

html {
  background: url(YOUR-IMAGE-URL) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100%;
  overflow: hidden;
}

body {
  background: url(YOUR-IMAGE-URL) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100%;
  overflow: auto;
}

...