Как отобразить центрированный фон фиксированной ширины - PullRequest
Новая
       0

Как отобразить центрированный фон фиксированной ширины

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

У меня есть веб-страницы с скучным белым фоном и все их содержимое (логотип сайта и несколько диаграмм Google) имеют фиксированную ширину 700px и по центру: 

    h1,h2,h3,p,div,form { 
    text-align: center; 
}

Я бы хотел добавить изображение png с вертикальной плиткой внизу (просто полоса 1px высоты), которое бы отображало фиксированную ширину 800px белого иостальные должны быть какого-то другого цвета (например, красный в приведенном ниже примере) или градиента и должны расти с шириной страницы:

enter image description here

Как вы делаете это лучше всего (т.е. наиболее надежно идля большинства браузеров) с CSS или HTML?

Ответы [ 2 ]

2 голосов
/ 04 февраля 2012

Вам потребуется поместить содержимое в контейнер размером 800 пикселей, чтобы получить как красный, так и градиентный фон и полосатый PNG-эффект.Таким образом, весь ваш контент затем перейдет в .container div, а ваши стили будут: 

body{
   background:#ff0000;
}

.container{
    width:800px;
    margin:0 auto;
    position:relative;
    background:url('/path/to/image/image.png') repeat 0 0;
}

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

<body>
    <div class='container'>
        <p></p>
        <h3></h3>
        .....
    </div>
</body>

В идеале, если вы выбираете минимальное разрешение экрана 800 x 600, ширина .container должна быть меньше 800, чтобы избежать горизонтальной полосы прокрутки.

Вы также можете найти ссылки ниже полезными при попытке создания кросс-браузерных градиентов и PNG:

  1. Генератор полос - http://www.stripegenerator.com/

  2. Создатель градиента CSS - http://www.colorzilla.com/gradient-editor/

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

Вы также можете рассмотреть возможность использования CSS PIE для совместимости с IE - http://css3pie.com/

Надеюсь, это поможет.

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

Если вы хотите добавить 1px высота изображения в качестве фона, найдите следующий код 

/*CSS*/
 body
 {background:#ff0000;}

 .main
 {
  text-align:center; 
  width:800px; 
  background-image:url('http://i.stack.imgur.com/LNBYu.png');
  background-repeat:y-repeat;
  background-position:center;
  min-height:300px;
 }

/*HTML*/
<body>
<div align="center">
  <div class="main">
     Your Content Goes Here       
  </div>
</div>
</body>

Вы можете увидеть результат следующим образом .... (Здесь я повторяю изображение высоты 1px по вертикали, чтобы вы могли видеть, что ваш фон заполнен изображением)

enter image description here

или Нажмите здесь, чтобы увидеть результат

Надеюсь, это поможет вам! Любые другие вопросы по этому поводу, пожалуйста, оставьте комментарий!

...