Как сделать адаптивный CSS фон img для длинного одностраничного веб-сайта

Уже два дня я пытаюсь сделать фоновое изображение адаптивным для мобильного телефона. Это одна длинная домашняя страница (около 8000 пикселей). Содержимое всей страницы имеет родителя div "background_div". Я пробовал и то, и другое: размер обложки или содержание тегов, изображение становится слишком пиксельным, как будто оно увеличивается, содержимое отзывчиво, но фоновое изображение вызывает у меня головную боль. Мне нужно, чтобы он распознавал ширину устройства, уменьшал масштаб и оставался фиксированным, а не растягивался на странице длиной 8000 пикселей. Может ли кто-нибудь дать мне представление о том, что здесь не так?

#background_div {
	background-image: url('home.jpg');
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}

/*It just won't scale to the divice width and height*/
<div id="background_div">


html css responsive-design background-image responsive-images
person Horatiu    schedule 04.02.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward 

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Если задать для них значение cover, изображение будет растянуто до размера контейнера, независимо от того, насколько он велик. Вот что вызывает ваше растяжение.

Установите для них значение auto или не устанавливайте их вообще, если вы хотите, чтобы изображение сохраняло исходный размер.

person Andy Arndt    schedule 04.02.2016
comment
Он хорошо работает на ноутбуке при сворачивании, чтобы проверить, отвечает ли он, но теперь на моем телефоне он центрируется посередине и занимает лишь небольшую часть, оставляя большую часть страницы белой, я новичок в адаптивном css, можете ли вы дать мне один больше советов о том, как это сделать? - person Horatiu; 05.02.2016
comment
Нашел достойное решение, требуется несколько небольших изменений, но, похоже, оно работает, - person Horatiu; 05.02.2016

arrow_upward
0
arrow_downward

CSS2

Если вам нужно увеличить изображение, вы должны отредактировать само изображение в графическом редакторе.

Если вы используете тег img, вы можете изменить размер, но это не даст вам желаемого результата, если вам нужно, чтобы изображение было фоном для какого-либо другого контента (и оно не будет повторяться, как вы, кажется, хотите)...

CSS3 раскрывает возможности

Это можно сделать в CSS3 с помощью background-size.

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

Поддерживаемые браузеры:

Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (веб-кит 532) и Chrome 3.0+.

#background_div {
    /* width: will stretch to width / height of element */
    background-size: 100% 100%;
}
person Sherly Febrianti    schedule 29.06.2016