Переполнение в теле, используя HTML и CSS? - PullRequest
Новая
       1

Переполнение в теле, используя HTML и CSS?

1 голос
/ 17 февраля 2012

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

Проверьте картинку:

wish it would overflow

Посмотрите, как золотые кусочки обрезаются на краю div?Предложения, пожалуйста?

Вот мои настройки:

в HTML: 

<body>
<div id="container">

в CSS: 

body{
    background-color: #0e0a04;
}

#container{
        max-width: 960px;
    margin: 0px auto;
    padding: 0px;
    margin-top:60px;
    background-color: #0e0a04; 
    background-image: url(/bundles/tabredirector/images/background-image.png); 
    background-repeat:no-repeat; 
    background-position: -70px -20px;  /*x,y*/
    overflow:visible;
}

Спасибо!

ЧТО Я ЗАКОНЧИЛ ДЛЯ РЕАЛИЗАЦИИ:

Спасибо за все ваши предложения, они вдохновили мое решение.Мое окончательное решение состояло в том, чтобы использовать главный div (position: относительный с z-index: -1) и мой контейнер (position: absolute z-index: 1) и вставить изображение в главный div, которое можно расположить абсолютно.Таким образом, контент всегда находится сверху, а фон не обрезается.

Ответы [ 4 ]

1 голос
/ 17 февраля 2012

Вы должны убедиться, что есть div вне вашего содержащего div.Вы можете иметь контейнер над и под ним, который будет содержать весь ваш другой контент.

Затем вам нужно иметь div шириной 100% с центрированным изображением полной bg.

Затем внутри этого divдобавьте еще один div для вашего контента, который может быть шириной 960 с автоматическим левым и правым полем, чтобы центрировать его на странице.

Вставьте HTML-код в свое сообщение, а CSS недостаточно, так как вам нужно добавить вВаш HTML!

Спасибо

1 голос
/ 17 февраля 2012

сначала опубликуйте свою разметку и css.Также укажите ширину div: 100%.

0 голосов
/ 17 февраля 2012

Вот краткий пример: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
    padding: 0px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#fullWidthImage {
    background-color: #0F9;
    height: 200px;
    width: 100%;
}
#centeredContent {
    padding: 0px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    height: 200px;
    background-color: #09C;
}
</style>
</head>

<body>

<div class="container">
  <p>&nbsp;</p>
  <p>top site content </p>
  <p>&nbsp;</p>
</div><!--container-->

<div id="fullWidthImage">
<div id="centeredContent">
content bla bla
</div>
</div><!--fullwidthImage-->

<div class="container">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>bottom of site content </p>
</div>
<!--container-->
</body>
</html>
0 голосов
/ 17 февраля 2012

Фоновые изображения на элементе появляются только внутри этого элемента.

Если вы хотите, чтобы фоновое изображение вашего <div> отображалось за пределами <div>, вам нужно вместо этого назначить фоновое изображение другому элементу, например, <body> элемент.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...