delete

by Vladislav Altyncev

HTML

<div class="food-upper">
    <div class="food-title">
        <div class="food">Test1</div>
        <img src="images/4.png" width="150px" height="150px">
    </div>
    <div class="food-title">
        <div class="food">Test2</div>
        <img src="images/1.png" width="150px" height="150px">
    </div>
    <div class="food-title">
        <div class="food">Test3</div>
        <img src="images/2.png" width="150px" height="150px">
    </div>
</div>

CSS

.food-upper {
width: auto;
/*height: 11px; чего за ерунда? */
margin: 20px;
/*background: url(img/upper_img.png) no-repeat;  обрезанная картинка с верху */

}
.food {
    position: absolute;
    z-index: 5;
    top: -10px;
    text-align: center;
    width: 100%;
}
.food img {}

.food-title {
    float: left;
    width: 150px;
    position: relative;
    height: 150px;
    margin: 0 10px;
    background: #eee url(img/food_title_bg.jpg) repeat; /* фон заголовка - серый градиент */
}