Вопросы Теги

создавая фоновое изображение, которое будет содержать как отзывчивое, так и охватывающее всю ширину и высоту браузера [дубликат]

Как будто вы пытаетесь получить доступ к объекту, который является null. Рассмотрим ниже пример: 

TypeA objA;

. В это время вы только что объявили этот объект, но не инициализировали или не инициализировали. И всякий раз, когда вы пытаетесь получить доступ к каким-либо свойствам или методам в нем, он будет генерировать NullPointerException, что имеет смысл.

См. Также этот пример: 

String a = null;
System.out.println(a.toString()); // NullPointerException will be thrown
4
задан Roko C. Buljan 9 December 2014 в 00:43
поделиться

5 ответов

jsBin demo 

background: url(image.jpg) fixed 50%;
background-size: cover;                 /* PS: Use separately here cause of Safari bug */

fixed (background-attachment) не является обязательным.

Вышеуказанное является просто сокращением для: 

background-image      : url(image.jpg);
background-attachment : fixed;
background-position   : 50% 50%;     /* or: center center */
background-size       : cover;       /* CSS3 */

Вы могли бы использовать во всех современных браузерах, но Safari: 

background: url(image.jpg) fixed 50% / cover;

, где / используется в сокращении фона для разделения и отличить position от size (причина position принимает как одиночные, так и множественные (X, Y) значения), но Safari имеет ошибку с этим сокращением /, поэтому используйте, как описано выше.

11
ответ дан Roko C. Buljan 19 August 2018 в 10:02
поделиться

Используйте атрибут background-size и установите фоновый повтор на no-repeat.

Нравится это: 

body { 
        background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

См. jsFiddle

2
ответ дан cubrr 19 August 2018 в 10:02
поделиться
  • 1
    Хорошо, это немного улучшилось, но изображение немного порезано снизу и сверху (сравните оригинал и результат) – Gaurang Tandon 1 September 2013 в 10:14
  • 2
    @GaurangTandon Это из-за позиционирования center center. Просто измените его на top left, если вы хотите, чтобы фоновое изображение было привязано в левом верхнем углу изображения. – cubrr 1 September 2013 в 10:17
  • 3
    Это сократилось еще больше, center center было лучше – Gaurang Tandon 1 September 2013 в 10:20

Вы всегда можете использовать абсолютную позицию div до 100% ширины и высоты с z-индексом, чтобы он мог быть фоном, после чего вы можете вставить изображение с тем же css для него. спасибо

0
ответ дан designerNProgrammer 19 August 2018 в 10:02
поделиться
  • 1
    -5 Nonono, если вы попробуете то, что вы сказали, изображение будет растягиваться при изменении размера вашего окна. и это bad . Надеюсь, вам не понравятся искаженные изображения ... :) А о z-index абсолютно нет необходимости устанавливать z-индексы в этом случае. – Roko C. Buljan 1 September 2013 в 10:42 
background-size: 100% 100%;
background-position: top left;
background-repeat: no-repeat;

должен сделать трюк. Обратите внимание: вы можете комбинировать позицию & amp; повторите в исходный фоновый атрибут

И примените 

html, body { min-height: 100%; min-width: 100%; }
0
ответ дан Sgoldy 19 August 2018 в 10:02
поделиться

Установите это для фонового изображения 

background-size: cover
1
ответ дан slash197 19 August 2018 в 10:02
поделиться