Ещё один довольно простой способ зафиксировать и растягивать фон в зависимости от разрешения монитора пользователя, заключается в следующем: - под контент подкладывается изображение, фиксируется в верхнем левом углу и задаётся ему минимальная ширина и высота равная 100% - тем самым, сохраняя пропорциональность при ресайзе. Также, добавляется min-width ширины изображения таким образом, чтобы изображение никогда не будет меньше, своего фактического размера. Дабы она не находилась на переднем плане, саму картинку и блок-обёртку смещают по z-оси на задний план (z-index:-1). Также, используется @media screen and (max-width:1024px), которое корректирует положение картинки, если окно обозревателя меньше изображения, используя комбинацию процентной величины левого положения и отрицательного левом поля. HTML-код: Code <img id="imgBg" src="/_content/_ext/img-bg/_st/ff11_3.jpg" alt="" />
- Добавляется после контента, перед закрывающим /body
CSS-стили: Code
#imgBg{display:block;position:fixed;top:0;left:0;min-height:100%;min-width:1024px;width:100%;height:auto;z-index:-1;}
@media screen and (max-width:1024px){#imgBg{left:50%;margin-left:-512px;}}
| 