Центрирование, наслоение и позиционирование. Как я могу заставить передний план выходить за пределы фона?

#html #css

#HTML #css

Вопрос:

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

файлы header.png и center.png имеют большую ширину, чем фон, но сами они должны быть фоновыми изображениями, поскольку поверх них будет нанесен текст.

Теперь я попытался использовать Z-index, но по какой-то причине изображения переднего плана по-прежнему продолжают смещаться на 42 пикселя вправо, затем я расположил изображения переднего плана через left:-42px; и текст, который будет находиться внутри разделов переднего плана, не будет располагаться там, где я хотел бы. Итак, приведенный ниже CSS был сброшен до моего значения по умолчанию.

 #wrapper {  /* Used for centering the webpage */
    width: 1044px;
    display: block;
    margin: 0 auto;
}

#container { /* Used for background image */
    width: 960px;
    display: block;
    margin: 0 auto;
    overflow: auto;
    backgorund: url(images/bg.png)
} 

/* Foreground Images */

h1 {
    width: 1044px;
    height: 196px;
    display: block;
    margin: 0 auto;
    background: url(images/header.png) no-repeat center;
}

#center_piece {
    width: 1044px;
    height: 492px;
    display: block;
    margin: 0 auto;
    background: url(images/center.png) no-repeat center;
}

Ответ №1:

Одно из возможных решений — обернуть каждый «фрагмент разрыва» в относительно расположенный элемент, а затем сделать ваш h1 и #center_piece абсолютно расположенными внутри него.

Демонстрация: http://jsfiddle.net/KZeuN /

HTML:

 <div id="wrapper">
    <div id="container">
        <div id="h1_origin">
            <h1>H1</h1>
        </div>
        <div id="center_piece_origin">
            <div id="center_piece">
                Center Piece
            </div>
        </div>
    </div>
</div>

CSS:

 #wrapper {  /* Used for centering the webpage */
    width: 1044px;
    display: block;
    margin: 0 auto;
}

#container { /* Used for background image */
    width: 960px;
    display: block;
    margin: 0 auto;
    /* remove overflow: auto; */
    background: url(images/bg.png)


}

/* Foreground Images */

h1 {
    width: 1044px;
    height: 196px;
    display: block;
    margin: 0 auto;
    background: url(images/header.png) no-repeat center;
    position: absolute;
    top: 0; /* Adjust */
    left: -25px; /* Adjust */
}

#center_piece {
    width: 1044px;
    height: 492px;
    display: block;
    /* remove margin: 0 auto; */
    background: url(images/center.png) no-repeat center;
    position: absolute;
    top: 0; /* Adjust */
    left: -25px; /* Adjust */
}

#h1_origin {
    position: relative;
    height: 50px; /* Adjust */
}

#center_piece_origin {
    position: relative;
    height: 50px; /* Adjust */
}