Фон (картинкой + цветом) вне блока с контентом и в шапке

[Agent]

Подскажите пожалуйста, куда именно в файле стилей поставить изображение (достаточно высокое), чтобы оно  повторялось только по горизонтали и видно его было бы только в шапке и по краям за пределами контента? Отмечено зеленым на скрине.

А ниже также за пределами контента сделать бежевый фон.

P.S. В шапку потом предполагается поставить еще один фон меньший по размеру.

[Vlad_Stiff]

Блоки разные

красный фон:

Код: [Выделить]

header#header {
    background: red;
}
синий:

Код: [Выделить]

.columns-container {
    background: blue;
}
отключите кеширование CSS в админке Prestsashop и увидте пути к файлам CSS
изучайте страницу, нажмите F12 в браузере, если вы работаете в Chrome это называется DevTools http://htmlhook.ru/instrument-dlya-chrome-devtools.html

[Agent]

Так то я поставлю, как вы привели код... А вот как мне нужно, не хватает знаний...
Надо чтобы картинка повторялась от левого края до правого через всю шапку, составляла единый непрерывающийся рисунок.
У меня схематично изображена одна вертикальная картинка (зеленым) от верха шапки до середины товара на витрине.
Но внутри основного блока с контентом ее не должно быть видно.
И фон то, что будет виден ниже картинки также должен быть только по краям. Именно как я заштриховал.
Плюс в шапку пойдет еще одна фоновая картинка полоской, там где лого, поиск, корзина. Это я знаю как сделать.
Получается фон зеленой картинкой будет проходить как бы под шапкой что ли. Т.к. два фоновых рисунка не поставить в один блок.

[Adik]

Код: [Выделить]

background: url(img/img.png) repeat-y;

[Agent]

Поставил в 2-местах упрощенно как смог

Код: [Выделить]

header {
  z-index: 1;
  position: relative;
  background: url(../img/header.jpg) repeat-y !important;
  padding-bottom: 15px; }

.columns-container {
  background: url(../img/header.jpg) repeat-y #fcfbdd !important; }


В итоге:
1. Изображение ниже шапки не является продолжением того, что в шапке.
И слевой колонки в шапку должно переходить, а не обрываться.
2. Повторяется вниз через небольшой отступ.
3. Распологается в блоке с контентом. А нужно только в левой и правой колонке.
4. Не отображается в правой колонке
5. Не возможно поставить в header еще одно фоновое изображение, т.к. получается уже есть.
6. Над лого осталась незакрашенная белая полоска.

[Adik]

1. Чтобы являдось продолжение, нужно использовать 1-но изображение для 1-го блока.
2. Тоже самое что и п1.
3. У блока контента нужно установить непрозрачный бекграунд.

Код: [Выделить]

background:#fff;4. В правой колонке у всех блоков нужно установить прозрачный бекграунд.
5. Нельзя устанавливаить 2 изображения для 1-го блока. Можно только перекрывать один другим с помощью z-index.
6. Тоже самое что и п1.

[Agent]

Поставил фоновое изображение в body:

Код: [Выделить]

body {
  min-width: 320px;
  height: 100%;
  line-height: 18px;
  font-size: 13px;
  color: #777;
background: url(../img/header.jpg) repeat-x #fcfbdd !important; 
  }
  body.content_only {
    background: none;
    min-width: 0px;
  }
Только надо было repeat-x сделать, а не repeat-y. Отсюда и проблема с правой колонкой решена и дублированием вниз.

Сделал прозрачный фон у контейнера с колонками:

Код: [Выделить]

.columns-container {
  background: transparent !important;
}
Сделал контенту белый фон и отступы слева и с права по 15px :

Код: [Выделить]

#columns {
  position: relative;
  padding-bottom: 50px;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  background:#fff;}
Сделал шапке прозрачный фон:

Код: [Выделить]

header {
  z-index: 1;
  position: relative;
background: transparent !important;
   }
Теперь в боковых колонках все ОК.
У контента белый фон - ОК.
Футер залился фоновым цветом. Этот момент решил, добавил !important. Теперь тоже ОК
.footer-container {
  background-color: #333 !important; }

Ту часть фонового изображения, которая должна быть в области шапки не видно (просто белый фон) - не ОК ))

Как исправить?

[Adik]

Код: [Выделить]

header {
    background: /* здесь задаете ваш фон*/;Для блоков div (banner, nav ...), которые входят в футер, задаете белый фон

Код: [Выделить]

background:#fff;

[Agent]

Блин, не знаю, как еще объяснить )
В шапке мне не надо другой фон отдельный. Я пытаюсь сделать один общий для шапки и боковых колонок (только контент его перекрывает белым, это сделал). Надо чтобы шапка стала прозрачной и через нее виднелся рисунок, часть которго видно в боковых колонках, а в шапке не видно сейчас почему то. Рисунок я поставил в body.

С футером разобрался. Он после установки фона в body футер залися тоже таким #fcfbdd. А серый дефолтный меня устраивал.
Поменял обратно, написал как.

[Миколас]

Код: [Выделить]

header {
    background: /* здесь задаете ваш фон*/;Для блоков div (banner, nav ...), которые входят в футер, задаете белый фон

Код: [Выделить]

background:#fff;

Везде сделай background:transparent

[Agent]

В сообщении №6 приводил код как сделал прозрачность шапке.

Код: [Выделить]

header {
  z-index: 1;
  position: relative;
background: transparent !important;
   }Но она остается белой. Что не так?

[PrestaMan]

В шаблоне header.tpl у header добавьте класс container.

Код: [Выделить]

<header id="header" class="container">В global.css

Код: [Выделить]

.header-container {
  background: transparent;
}

[Agent]

В шаблоне header.tpl у header добавьте класс container.

Код: [Выделить]

<header id="header" class="container">В global.css

Код: [Выделить]

.header-container {
  background: transparent;
}

Так чуть получше, но не совсем )
Фоновый рисунок стало видно в верхней части боковых колонок, а в шапке по прежнему белая заливка.


И футер обрезался по краям.

[Миколас]

Значит у тебя в header еще какие-то div и у них фон белый. Смотри в коде, найди все div в header и измени у них правило стилей  background: transparent.

[Agent]

Эврика! Получилось! ))
Не в div дело. Опять надо было добавить !important в header-container чтобы изменения применились

Код: [Выделить]

.header-container {
  background: transparent !important;
}
А как теперь футер вернуть в первоначальное состояние?
Вот такое как было не обрезанное по бокам: