img в div блоке

[malsyst]

Доброго времени суток! Подскажите, пожалуйста, как разместить изображение в таком блоке:

<div class="box">
    <h2 class="title title-box">Меню раздела</h2>
    <div class="box-content">Текст</div>
</div>


.box {
margin: 10px;
border: 2px solid #BBB;
width: 210px;
height:100%;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background-color:#fafafa;
box-shadow: 0 0 5px #e4e5e7;
}
h2.title-box {
border-bottom:   2px solid #BBB;
height: 40px;
background: url(фон) repeat-x;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
h2.title {
font-size: 20px; 
font-family: Verdana, sans-serif;
padding: 10px 10px 15px 70px
}

для h2.title задан padding 70px слева – это место под изображение (70x40)

Если размещаю в HTML, то отображается не так, как нужно, а в CSS – перекрывает background h2.title-box, но отображается нормально. Подскажите, как сделать правильно?

[USF]

как оно фон перекрывает? изображение с прозрачностью сделай в png, тогда должно нормально ложиться.

[Catherine]

Может, надо так?

background: url(фон) no-repeat;

Или выложите пример на http://jsfiddle.net/

Edited July 15, 2012 by Catherine

[malsyst]

Может, надо так?

background: url(фон) no-repeat;

Или выложите пример на http://jsfiddle.net/

Вто что получается

[USF]

вы задаете background-image, а он уже есть у этого блока(градиент).

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

Можете в шапку поместить еще один элемент(они будут в ряд с h2) и задать ему фоном картинку. это тоже довольно просто.

Edited July 15, 2012 by USF

[malsyst]

вы задаете background-image, а он уже есть у этого блока(градиент).

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

Можете в шапку поместить еще один элемент(они будут в ряд с h2) и задать ему фоном картинку. это тоже довольно просто.

Спасибо, USF. Буду пробовать

[USF]

удачи, если что пиши - поможем)

[malsyst]

удачи, если что пиши - поможем)

Попытался отдельным элементом рядом поставить, но безрезультатно. Может свойства какие-то ещё прописать нужно?

[USF]

дай ссылку на результат, посмотрим

[malsyst]

дай ссылку на результат, посмотрим

http://jsfiddle.net/malsyst/5C9RK/

[USF]

http://jsfiddle.net/5C9RK/1/

1) em тут зря(он для текста), лучше div

2) блоку надо задать размер(так как содержимое у него пустое)

3) сделать его плавающим с float:left

ЗЫ: картинку впихнул первую попавшуюся, она больше размера чем я задал, это только для проверки

[malsyst]

http://jsfiddle.net/5C9RK/1/

1) em тут зря(он для текста), лучше div

2) блоку надо задать размер(так как содержимое у него пустое)

3) сделать его плавающим с float:left

ЗЫ: картинку впихнул первую попавшуюся, она больше размера чем я задал, это только для проверки

Да, спасибо, USF.

[USF]

Пожалуйста, обращайся