Проблема с CSS с фоновым изображением

Я пытаюсь добавить фоновое изображение в свой заголовок сайта. Часть изображения должна быть покрыта основным содержанием.Проблема с CSS с фоновым изображением

Он правильно позиционирован, хотя я добавил z-index, основное содержимое не покрывает фоновое изображение.

Here is the website.

Почему бы это?

Спасибо!

Edit:

Если вы посмотрите на правой стороне вы увидите коричневые яйца не покрывается основным содержанием. Вы все еще можете видеть его часть.

Вот код:

.header-navigation.back { 
    z-index:-1; 
    position:absolute; 
    margin-left:0; 
    margin-top:-6px; 
    border:none; 
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px; 
background-image:url('http://frenchegg.com/images/backmenu.png'); 
}

и вот основное содержание, которое должно охватывать изображение:

.main-content { 
    z-index:99; 
    position:relative; 
    padding:1em 0 8.5em 0; 
    background:#fff; 
}

источник

2013-04-15 Robert Miller

Пожалуйста, поделитесь кодом или рассмотреть возможность сделать скрипку, а не только указывать ссылки на ваш сайт, как если ваш сайт не более, этот вопрос не будет никакой пользы будущим посетителям –

В моем браузере он выглядит хорошо. –

Вы можете указать столько z-index, сколько хотите ... Позиция 'main-content' не совпадает. 'main-content' намного ниже. – tiagojpdias

пожалуйста, добавьте overflow:hidden CSS к header-wrap класса

.header-wrap { 
    ... 
    overflow: hidden 
    ... 
}

, и он должен выглядеть хорошо.

Для журнала в выпуске:

удалить z-index: 99999 из класса .bann

и добавить этот CSS к классу tooltip-wrap

sorry something went wrong

Благодаря

источник

2013-04-15 18:06:07

А, прошу прощения. я неправильно понял. Я исправлю это –

@ LouisG.Talbot См. Обновленный ответ –

Он отлично работает! Однако, если вы нажмете «Войти», вы увидите форму входа. Форма скрыта, хотя. Как я могу это исправить? –

Походит вы можете просто уменьшить высота правила header-navigation.back до 100px, а не беспорядок с z-index.

источник

2013-04-15 18:09:37 Caspar

Я предпочел бы накрыть его, так как на мобильной версии яйца показаны полностью. –

Я изменил класс банн на:

.bann { 
    cursor: pointer; 
    display: block; 
    height: auto; 
    position: relative; 
    width: 101.5%; 
    z-index: 99999; 
    margin-left: 12px; 
}

после того, что кажется, нормально ... проверить его и сообщить мне о результатах;

Я тестировал выше код с поджигателями;)

источник

2013-04-15 18:43:50

Проблема с CSS с фоновым изображением

ответ

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