Как сделать в одном блоке два фоновых цвета?

Question

[newbieman]

Имеется отдельный блок. Нужно залить его двумя разными цветами. Заголовок одним цветом, остальное другим.
Как на картинке.

Answer 1

[Евгений Самойленко]

Разделить блок на header и content.
Задать нужную высоту header и content.
Выставить им width 100%.
Вставить в один блок: container.
все.

UPD.
Умничка Егор Федосенко проверил за меня, и, действительно, widht: 100% можно не ставить. Хотя это было не критично и, в общем-то, всем плевать:)

Comments

[Егор Федосенко]

Маленькое замечание, а зачем прописывать width: 100% ?

[Евгений Самойленко]

Егор Федосенко: Чтобы растянулись полностью на ширину родителя. Просто без заданной ширины и контента внутри блока не будет бекграунда, вроде.

[Егор Федосенко]

Евгений Самойленко: что-что, простите? jsfiddle.net/a95sLdLz

[Евгений Самойленко]

Егор Федосенко: спасибо, что проверил за меня:) Я не был уверен в этом, написал на всякий случай. Молодечик:)

[Егор Федосенко]

Евгений Самойленко: все элементы у которых свойство display: block; имеют по умолчанию width: 100%;
Если это inline-block - другой разговор.
Всегда пожалуйста.

[mr_firuzinho]

тут можно еще одни способом :

background-image: -webkit-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);
  background-image: -moz-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);
  background-image: -o-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);
  background-image: linear-gradient(to right,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);

Answer 2

[gleendo]

Весь блок заливаешь серым, верхний текст другим цветом. У верхнего текста делаешь line-height нужно высоты и ширину 100% от серого блока + padding

Comments

[65536]

Маленькое замечание, а зачем прописывать line-height нужно высоты?

[gleendo]

65536: ну да, line-height можно и не указывать. вполне сойдет и padding.

[65536]

con_: лайнхейт нужен для пикселпёфекта между файрфокс/вебкит, либо четный либо нечетный не помню, вроде четный. иначе в одном из браузеров съедет на 1 пиксель