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

http://www.stumbleupon.com/

http://www.mixx.com/

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

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

Я уверен, что есть тонны учебников в интернете, но у меня нет ключевых слов для поиска.

8
background-image css

9 ответов

анализ stumbleupon.com:

"заголовок" фактически состоит из два divs:wrapperHeader и wrapperNav. У этих двух разные цвета фона. У этих divs есть только один ребенок, каждый из которых имеет свойство CSS 

margin: 0 auto

это приводит к горизонтальному центрированию.

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

структура выглядит следующим образом:

<div id="wrapperHeader">
    <div class="" id="header">
            <!-- mnore stuff here, like logo -->
    </div>  <!-- end header -->
</div>
<div id="wrapperNav">
    <ul id="navMain">
        <li class="discover first"><a href="/discover/toprated/">Discover</a></li>
        <li class="favorites"><a href="/favorites/">Favorites</a></li>
        <li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li>
    </ul> <!-- end navMain -->  
</div>
<div id="wrapperContent">
    <div class="clearfix" id="content"> 
    </div> <!-- end content -->
</div>

если вы Палий для Firefox, вы можете легко анализировать элементы самостоятельно.

6

это background-image значение body в собственность background-repeat:

background-repeat: repeat-x;

еще:http://www.w3schools.com/css/pr_background-repeat.asp

редактировать: что касается центрирования вашего контента -я сделайте это так:

<body>
<div id="wrapper">
  <!-- here is wrapper *everything* else -->
</div>
</body>

затем установить width обертки для значения (в основном 960px). Затем, когда вы устанавливаете его маржу в 0 auto, он центрируется.

#wrapper{
  margin: 0 auto;
}
7

добавление фоновых изображений имеет 2 недостатка:

  1. каждый раз, когда вы хотите изменить цвет заголовка, вы должны открыть свой Photoshop и изменить цвет там, а затем изменить его снова в CSS.

  2. теперь вы хотите, чтобы цвет фона заголовка, чтобы растянуть по всей странице, но если вы хотите сделать это с футера?

самым простым решением является следующее:

(вы не только создайте простой способ растянуть цвет по всей странице, имея возможность использовать другой цвет во всем содержимом заголовка и нижнем колонтитуле, но также он избавляет вас от проблемы двойного поля IE (когда вы используете ширину и поле в одних и тех же элементах).

4

позволю себе не согласиться, есть простой способ сделать это. Совместим как с Google Chrome, так и с Firefox, т. е. не тестируется.

в вашем файле CSS:

body{
    overflow-x:hidden;
}

div#headerbg{
    width:110%;
    margin-left:-20px;
    background-color:black;
}

и теперь просто используйте его в своем HTML-файле. Вы можете добавить позиционирование и что-не это.

2

вы можете использовать ширину фонового изображения 1px с установленным повторением фона в горизонтальном положении. 

background-image:url('paper.gif');
background-repeat:repeat-x;

а затем выровнять содержимое, как вам нравится.

1

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

фон просто устанавливается как повторяющееся изображение (repeat-x), чтобы сделать его похожим на элемент меню на самом деле расширяет всю ширину страницы.

1

Я думаю, что вы говорите о разнице ширины 100% / 80%....

Это должно помочь вам начать работу:

<div id="header" style="width:100%; margin: 0px;">
   <!-- header content -->
</div>
<div id="content" style="display: block; width: 80%; margin: 0px auto">
   <!-- content -->
</div>

поле: авто на содержимом делает блок центрированным.

Liike Адам говорит, добавьте фон-повторите, чтобы дать ему графически приятный элемент.

0

с CSS 2, вы не можете растянуть фоновое изображение. Нет свойства для установки размеров фонового изображения. Вы можете просто повторить его на X, Y или обе оси.

CSS 3 позволит это растяжение.

0

очень просто без целой кучи шумихи.

вставьте это между контейнером-body - and-div-у вас может быть все, что вы хотите, но на моей странице это так: (я пытался получить его, чтобы обернуть, нет, просто скопируйте и вставьте.)

<body>

<div id="bv_ImageMap1" style="margin:0;padding:0;position:absolute;left:0px;  top:187px;width:100%;height:5px;text-align:left;z-index:0;"> <img src="files/IMG_2.jpg"  id="ImageMap1" alt="" usemap="#ImageMapImageMap0" border="0" style="width:100%;   height:5px;">

<map name="ImageMapImageMap0">
</map>
</div>

<div container>

затем измените информацию, необходимую для top:высота px:_px img src= " yourfile / yourimg.jpg и важно не забудьте следующую высоту:__px

ничего больше нужна нигде. Попробовать его.

0