Позиционирование фонового изображения css

Question

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

http://www.imagecross.com/11/image-hosting-view-53.php?id=4949contextual.png

Answer 1

Сделайте это - прикрепите нижнее правое изображение к тегу body (с цветом фона), а также установите высоту body и html на 100%, например:

html { 
        min-height: 100%;
}

body { 
        background: url('http://cvcl.mit.edu/hybrid/cat2.jpg') no-repeat bottom right #000;
        height: 100%;
}

Затем вы можете установить верхнее левое изображение в любом элементе div, как обычно, как и предполагалось:

#topLeft {
    width: 100px; height: 100px;
    background: url('http://cvcl.mit.edu/hybrid/cat2.jpg');
    position: absolute;
    top: 0px;
    left: 0px;
}

Answer 2

Пример HTML

<div id="topLeft"></div>
<div id="bottomRight"></div>

CSS:

BODY {
    background-color: black;
}

#topLeft {
    width: 100px; height: 100px;
    background: url('http://cvcl.mit.edu/hybrid/cat2.jpg');
    position: absolute;
    top: 0px;
    left: 0px;
}

#bottomRight {
    width: 100px; height: 100px;
    background: url('http://cvcl.mit.edu/hybrid/cat2.jpg');
    position: absolute;
    bottom: 0px;
    right: 0px;
}

Отрегулируйте высоту и ширину по вкусу