Текущее расположение с фоновым изображением
У меня есть изображение шириной 1020 пикселей и повторяется (в соответствии с CSS) по вертикали. Это создает хорошую тень на краю содержащего элемента div. Проблема в том, что когда div сокращается, изображение не уменьшается с содержащим div? Мне нужно, чтобы изображение уменьшилось с помощью div, но оно остается на фиксированной ширине? Я плохо знаком с текучими макетами после сборки с px в течение многих лет! Любые идеи приветствуются.
Обратите внимание, что мне не удалось создать скрипку, потому что я не смог найти способ загрузить файл shadow.jpg!
Код здесь:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stuck!</title>
<style type="text/css">
#main-container {margin: 0px auto; border: 2px solid blue; width: 100%; max-width: 1020px; background-image: url(shadow.jpg); background-repeat: repeat-y;}
</style>
</head>
<body>
<div id="main-container" style="height: 1228px"></div>
</body>
</html>