[ArtDeco]

Добрый вечер, форумчане. Подскажите, как правильно вставить картинку в цветную часть меню? Хочется поменять простую цветную заливку на картинку.

Меню

[свернуть]

код CSS:

Код:

.side-item-left {border-bottom:1px solid #c3e3f3; margin-bottom:20px; box-shadow:0px 1px #FFF;}
.side-item-left .side-title {padding:0 15px 0 20px; margin-bottom:10px;}
.side-item-left .side-content {color:#909090; padding:0 20px 20px 20px; font-size:13px;}

nav.side-item-left {background-color:#fff; border-bottom:0; overflow:hidden;
border-radius:4px; box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2); margin:0 10px 20px 10px;}

.main-menu {padding:0 0 10px 0;background: linear-gradient(to bottom, #ffffff 20%,#f8f8f8 100%);}
.main-menu li:first-child {font-size:16px; font-weight:700; padding:10px 20px; margin-bottom:10px;}
.main-menu a {color:#5c5c5c; padding:5px 20px; display:inline-block;}
.main-menu a:hover, .main-menu li:first-child {color:#fff; background-color:#6fb4e3;}
.main-menu.yellow a:hover, .main-menu.yellow li:first-child {color:#fff; background-color:#f4b756;}
.main-menu.green a:hover, .main-menu.green li:first-child {color:#fff; background-color:#a1d48d;}
.main-menu.red a:hover, .main-menu.red li:first-child {color:#fff; background-color:#eb7f73;}

[свернуть]

код HTML:

Код HTML:

<aside class="col-left"> <nav class="side-item-left"> <ul class="main-menu blue"> <li>Заголовок</li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> </ul> <ul class="main-menu yellow"> <li>Заголовок</li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> </ul> <ul class="main-menu green"> <li>Заголовок</li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> <li><a href="#">Категория</a></li> </ul>

[свернуть]

[cybb]

элементам <li>Заголовок</li> списка <ul class="main-menu blue"> даете любой класс,
например <li class="main-menu__item--background">Заголовок</li> если картинка будет одинаковая у всех элементов где вы захотите установить в качестве фона картинку,
если же разные картинки то давайте каждому элементу свой класс и через css этому классу устанавливаете фон.
Если не справитесь, сбрасывайте картинки и разметку, сделаю. Удачи!