Как установить текстуру фона на 50% страницы в CSS

Question

Я пытаюсь решить, как отобразить текстуру моего фона для 50% высоты отображаемой страницы. В настоящее время я использую следующий код, который включает в себя полупрозрачную текстуру, которая выходит за сплошной цвет фона.Я хочу, чтобы цвет фона был над всей страницей, но текстура останавливалась на 50% высоты страницы, но я немного растерялся, как это сделать, это новая функция css3? Если да, то есть ли работа?вокруг других браузеров или альтернатив jquery, если это не будет работать со старыми браузерами?.

body {
background: url(../images/light/background.png) repeat scroll 0 0 #832029;}

Answer 1

Для CSS3 существует свойство background-size, которое поддерживается во всех основных браузерах, IE9 + и Opera 10+.А для IE8 и ниже есть IE Filter

Сделайте 2 фоновых изображения.Одно изображение - это градиент (что также можно сделать с помощью CSS3: linear-gradient), а второе изображение - это текстура.Используйте несколько фонов и задайте только размер фона для фонового изображения текстуры.

---

Если вы не используете это свойство CSS3, вы можете решить его только с помощью HTML и CSS.Сделайте div внутри так называемого #background.А с помощью CSS задайте абсолютную позицию и высоту 50%:

#background
{
  position: absolute;
  z-index: -1; // place it on the lowest layer
  top: 0; right: 0; bottom: 50%; left: 0;
  background: url('path/to/images/background.png') repeat scroll #832029;
}

Answer 2

Я не уверен, что идея 50% высоты - лучший подход.

Попробуйте это:

body{
  background-color: #832029;
  background-image: url(../images/light/background.png);
  background-repeat: repeat-x;
}

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