Фоновое изображение полной страницы

Question

Фоновое изображение полной страницы

0

Я пытаюсь получить полное фоновое изображение. Как я могу заставить это фоновое изображение занимать высоту страницы без необходимости ее прокрутки?

http://jsfiddle.net/DFN5y/

#cover {
 background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed; 
 background-size: cover;
 height:100%;
}

В настоящий момент 100% плюс фиксированная высота делает его слишком высоким.

Jimmy 11 апр. 2014, в 12:08

Источник

0

Нравится? jsfiddle.net/DFN5y/2
Turnip 11 апр. 2014, в 10:07
0

Я так думаю, как ты это сделал?
Jimmy 11 апр. 2014, в 10:08
0

Написал ответ
Turnip 11 апр. 2014, в 10:10

Показать ещё 1 комментарий

Теги:

html

css

css3

2 ответа

1

Вы можете стиль для тела, чтобы сделать та:

body {
  background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed; 
 background-size: cover;
}

Рабочая демонстрация

Обновление: без стиля

 #cover {
   background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed; 
   background-size: cover;
   height:100%;
   position:fixed;
   width: 100%;
   }

Рабочая демонстрация

Milind Anantwar 11 апр. 2014, в 08:46

0

Проблема с использованием тела заключается в том, что я использую систему шаблонов, и мне нужно, чтобы тело было одинаковым в каждом шаблоне, извините, я должен был упомянуть, что
Jimmy 11 апр. 2014, в 10:07
0

@Jimmy: обновил ответ. Проверь сейчас
Milind Anantwar 11 апр. 2014, в 10:10

Ещё вопросы

Проблема с использованием тела заключается в том, что я использую систему шаблонов, и мне нужно, чтобы тело было одинаковым в каждом шаблоне, извините, я должен был упомянуть, что
@Jimmy: обновил ответ. Проверь сейчас

Turnip · Accepted Answer · 2014-04-11T08-31-00.000Z

Дайте вашему #cover фиксированное положение и размеры жидкости:

#cover {
    background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed; 
    background-size: cover;
    height:100%;
    width: 100%;
    position:fixed;
}

Рабочая демонстрация