Как вы растягиваете фоновое изображение

Question

У меня есть градиентный фон, который я использую следующим образом в приложении ASP.Net Webforms:

<div style="background-image: url(foo.jpg) repeat-x;">
    ... Injected HTML codes
</div>

Где foo.jpg - изображение размером 200x1 пикселей. Моя проблема в том, что высота внедренного HTML варьируется от 200px до 1000+ px в зависимости от размера сетки данных. Кроме того, этот сегмент является частью гораздо большей страницы, которая используется для позиционирования контента.

Мне бы хотелось, чтобы после внедрения HTML-кода фон автоматически растягивался, чтобы соответствовать пространству, чтобы градиент плавно применялся по всей высоте.

Answer 1

CSS не может растягивать фоновые изображения.

Однако элементы IMG можно растягивать, поэтому вы можете поместить IMG прямо перед сеткой, использовать CSS, чтобы задать для него position: absolute и z-index:-1, и использовать jQuery, чтобы установить его размеры равными сетке.

Answer 2

Я исследовал, как сделать решение SLaks, и обнаружил «хак», который подходит для моей ситуации. Хотя он не выполняет операцию растяжения, я имитирую такую, которая подходит для моей ситуации, и это 100% CSS. Я не утверждаю, что это общее решение, но оно работает для меня.

Чтобы ответить на вопрос, мне нужно быть немного более точным в своем определении моей проблемы. в моем оригинальном коде

<div style="background-image: url(foo.jpg) repeat-x;">
... Injected HTML codes
</div>

foo.jpg - градиент 600px x 1px от цвета к белому, который является цветом веб-сайта. Таким образом, на больших дисплеях я получаю очень плавный переход от цветного к белому. То, что это не идет ко дну, - это то, с чем я могу жить. Проблема возникает, когда мне нужно визуализировать некоторые данные, отображающие только 300 пикселей в высоту. Тогда только 300 пикселей из 600 пикселей на градиентном дисплее. В результате чего «некрасивый» шаг меняет цвет. Это то, что мне действительно нужно, чтобы избавиться от изменения размера.

Хотя изменение размера фона является технически более чистым решением, я сделал

<div style="background-image: url(foo.jpg) repeat-x;">
    <div  style="background-image: url(fooBottom.png) repeat-x; background-position: bottom;"
       ... Injected HTML codes
    </div>
</div>

fooBottom.png для меня - это изображение размером 200 на 1 пиксель, 100% белого цвета снизу и 100% прозрачного вверху.

Ключевым моментом на внутренней стороне является "background-position: bottom;" Это позиционирует новый фоновый раздел. Если отображаемый для меня раздел имеет высоту> 800 пикселей, этот новый код ничего не делает визуально.

Но для секций короче, чем 800px, нижнее изображение становится ближе к верхнему. Это покрытие происходит потому, что внутренний блок нарисован «выше» внешнего блока. Затем, если секция становится короче, нижнее фоновое изображение покрывает все больше и больше верхнего фонового изображения.

Но из-за прозрачности на нижнем изображении это гарантирует, что на более коротких участках будет смесь с белым на дне.

Я собираюсь создать блог на моем личном сайте, который показывает примеры. Когда я закончу пример, я обновлю этот пост.

---

ОБНОВЛЕНИЕ - я опубликовал рабочий пример на http://sntsoftware.com/Blog

Answer 3

Я был в вашей ситуации раньше, и у меня было около пяти разных фоновых изображений для вариаций разрешения. Если бы это был их первый раз на сайте (нет файлов cookie), я бы представил им целевую страницу, где я установил файл cookie (используя Javascript) со значением разрешения клиента (см. Мою функцию getViewportDimensions в * 1002). * это сообщение в блоге ). На стороне сервера я оценил разрешение следующего запроса и выбрал, какое изображение добавить в мой CSS. Это работает хорошо. Обязательно установите разрешение по умолчанию на стороне сервера в случае, если пользовательский агент имеет Javascript или куки отключены.