Как разместить фоновое изображение за логотипом?

У меня есть заголовок, который имеет изображение логотипа слева. Я пытаюсь поместить фоновое изображение в заголовок, но изображение bg начинается справа от изображения логотипа. Изображение логотипа - это прозрачное изображение PNG, поэтому Я предполагаю, что изображение Bg может помещать изображение логотипа.Как разместить фоновое изображение за логотипом?

Вот HTML

<div id="header"> 
    <div class="fl" style="width:378px; height:79px; overflow:hidden;"> 
     <p align="left"><a href="http://mysite.com/magento/index.php/"><img src="mysite.com/magento/skin/frontend/default/my_theme/images/dlogo.png" ></a></p> 
    </div> 
</div>

CSS для заголовка:

#header{ width:972px; padding:15px 0px 10px 0px; margin:0 auto; text-align:left; height:117px; background:url(../images/dbody_background.jpg)}

источник

2012-10-10 akt

Это работает для меня: http://jsfiddle.net/Bk4qp/ Может быть, у вас есть проблемы с Б.Г. изображение? –

В чем разница здесь? – akt

Нет. Я использовал ваш код с моими изображениями (у меня его нет). И, похоже, это работает, если я понимаю ваш вопрос. –

Вы нужно использовать z-index свойству

#header 
{ 
    z-index : 100 ; 
} 

#header img 
{ 
    z-index : 101 ; 
}

изображение внутри z-index должен быть больше, чем заголовок z-index ..

источник

2012-10-10 06:47:46

Проблема заключается в том, что изображение Bg начинается справа от логотипа image.and, поэтому он не работает. – akt

Почему бы вам не сделать оба элемента: абсолютное и зафиксировать позицию для этого –

Использование z-index усложняет ситуацию при понимании кода. Вместо этого вы можете использовать параметр смещения для изменения положения фонового изображения.

#header{ 
    width:972px; 
    padding:15px 0px 10px 0px; 
    margin:0 auto; 
    text-align:left; 
    height:117px; 
    background:url(../images/dbody_background.jpg) 50px 10px; 
}

Где
50px это смещение от левой границы и ..
10px смещен от верхней границы.

вы можете использовать отрицательное значение здесь. попробуйте его проверить.

источник

2012-10-10 07:24:26 Girishkumar

Это сработало, спасибо. – akt

Это работает для меня, просто изменить свойство Background, так как это ->

background:url(../images/diwalibody_background.jpg)no-repeat scroll center top transparent;

источник

2012-10-10 09:00:18 akt

Как разместить фоновое изображение за логотипом?

ответ

Смежные вопросы