CSS-фоновое изображение выровнено по левому нижнему углу без использования полос прокрутки - PullRequest
Новая
       23

CSS-фоновое изображение выровнено по левому нижнему углу без использования полос прокрутки

1 голос
/ 21 июня 2010

У меня простой сайт: фиксированная ширина, переменная высота, по центру.Я хочу, чтобы фоновое изображение выровнялось по левому нижнему углу содержимого следующим образом: 

----------------------------------------------------------
                ____________________________
                |       <- 960px ->        |
                |                          |
                |                          |
                |                          |
                |         Content          |
                |                          |
                |                          |
                |                          |
      ----------|                          |
      |         ____________________________
      | bg-img   |
      |          |
      ------------
----------------------------------------------------------

Если окно браузера достаточно большое, все фоновое изображение должно быть видно.Если он меньше, изображение должно быть обрезано без использования горизонтальных или вертикальных полос прокрутки.Я не знаю, как сделать горизонтальную и вертикальную вещь правильной.Какие-либо предложения?Большое спасибо.

Ответы [ 5 ]

1 голос
/ 22 июня 2010

Не помещайте фон в div содержимого, поместите его в дочерний элемент содержимого div.Затем поместите этот элемент абсолютно: 

position: absolute;
left: -100px;
bottom: -100px;

Для него также потребуются ширина и высота, а div содержимого должен быть позиционным: относительным или абсолютным.Если вам нужен более тщательный пример, просто скажите, и я напишу один.

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

0 голосов
/ 09 июля 2010

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

0 голосов
/ 21 июня 2010

Чтобы получить идеальный размер для разных браузеров, вы можете установить фоновое изображение, а затем установить для левого и правого полей значение auto.Это переведет ваш веб-сайт в автоцентр и позволит обрезать фон независимо от того, насколько сильно изменился браузер. 

body {
    background-image: whatever.jpg;
}

maindiv/contentholder {
    margin-left:auto;
    margin-right:auto;
}
0 голосов
/ 21 июня 2010

Абсолютно позиционируйте BG-IMG. Скрыть переполнение, созданное из изображения. Я бы поместил его в стиль и создал бы div.

0 голосов
/ 21 июня 2010

Сделайте изображение действительно большим и примените его к тегу body так, чтобы изображение было там, где вы хотите.Поместите его в центр слева, но сделайте его достаточно широким, чтобы он располагался правильно, например, более чем на 960 пикселей, но даже с любой стороны, чтобы он был в центре.

...