Шапка: картинка и фон – два в одном

Сделать фон и картинку в разных слоях, присвоить им классы и с помощью CSS расположить в header

Сделать фон и картинку в разных слоях, присвоить им классы и с помощью CSS расположить в header

Что значит – в разных слоях? А они у меня в каких слоях!? Всё я уже присваивал, всё уже располагал, всё уже прописывал…. ничего не получилось!

Может кто-то помочь написанием конкретного кода? То есть, как именно нужно прописать в CSS и где и что прописать в файле header.php.

Убедительно всех прошу: не надо писать общими фразами!

Если надо, могу прислать все файлы данной темы. Хотя, дело здесь не в теме.

Ну вы хоть ссылочку на сайт дайте, чтобы можно было визуально глянуть на реальное положение вещей. В разных слоях – это значит в разных div с разными классами.

Дело в том, что пока этот сайт у меня на компе. Могу выслать все файлы темы вместе с папкой картинок. Если конечно это будет удобно…
Кстати, сама эта картинка почему-то прописана не в стилях, а в файле functions.php.
Тема, конечно интересная… запутался я конкретно…..

Нет, файлы темы мне не нужны, своих хватает. Сделайте хотя бы скрины.

Картинку прикладываю в уменьшенном виде. Картинка сейчас слева (относительно всей длины шапки). Мне надо её подвинуть вправо, а слева прописать фон, который является продолжением фона с машиной. Фон: ширина 1 пиксель, высота такая же, как и у картинки с машиной.

Собственно говоря, какие нужны ещё картинки?

Нужна картинка с продолжением фона.
для текущей картинки в CSS указывается позиционирование (float:right;) картинка переместится к правому краю )
для другой, которая продолжение фона (float:left;) ее прижмет к левому краю

В вашем случае вы уже допустили ошибку прописав картинку в #header как bakcground
попробую на пальцах:
это Ваш #header идет как div (слой) в него можно поместить еще два
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
|#header |
| _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ |
|| | | ||
|| div картинко2 | | div картинко1 ||
|| float:left | | float:right ||
|| _ _ _ _ _ _ _ _ | |_ _ _ _ _ _ _ _ _ _ _ _ _ ||
|_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ |

и будет вам две картинки в шапке, только ставить их надо не бэкграундом

Cпасибо за подробные объяснения. Вообще-то у меня хедер находится немного выше, чем эти 2 картинки. Я сразу просто не стал запутывать. В общем, получается так. Так выглядит код хедера в CSS:

#header{text-align:left;
display: block;
margin: 10px 10px 0;
padding: 9px 10px;
background: #462217 url(images/bg_header.gif) repeat-x;  
color: #b76d56;
}

Чуть ниже на картинке, хедер это самый верхний прямоугольник, где написан заголовок "Автомасла мира".
Так я прописал стили двух картинок в CSS:

#banner-add{
float: left;
margin: 20px 10px 0;
}

#banner{
float: right;
margin: 20px 10px 0;
}

Так выглядит кусок кода в файле header.php:

<div id="header">
            <div class="skip"><a href="#main">К содержанию</a></div>
            <h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
        </div>
        <div class="clear"></div>
        <div id="banner-add"><src img="images/bg_banner_add.gif"></src></div>
                <div id="banner"><src img="images/bg_banner.gif"></src></div>
        <div class="clear"></div>

Класс clear в CSS выглядит так:

.clear{
    margin: 0;
    padding: 0;
    clear: both;
}

При всём при этом верхняя часть сайта выглядит так:

А должна вот так:

Я уверен, что я что-то не так делаю, но не знаю, что именно.