Перенесите несколько фоновых элементов на передний план

В настоящее время я работаю над веб-сайтом для хобби и пытаюсь сделать что-то более продвинутое, чем должно быть, надеюсь, вы сможете мне помочь.

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

Я использую метод множественного фона CSS3, чтобы использовать 3 разных элемента фона. Я включил код и изображение, чтобы показать, что я человек.

Ваше здоровье

background-image:url(logo.png), url(shinybg.png), url(bgpat.jpg);
background-repeat:no-repeat, no-repeat, repeat;
background-position:top center, top 18px center, top left;
height:1000px;
padding-top:10px;
z-index:-1

Изображение: http://goo.gl/JEvhAz

РЕДАКТИРОВАТЬ: Хорошо, кажется, я исправил это. Я сделал тег img вне моей оболочки и сделал его положение абсолютным, способ его центрирования был следующим:

#logotop {
    width: 905px;
    margin: 0 auto;
    margin-top:-18px;
    position:absolute;
    left:0;
    right:0;
}

Левый и правый 0 вместе с полем 0 авто исправили, ура ребята


html css background foreground
person user3347513    schedule 24.02.2014    source источник
comment
Можете ли вы также включить свой html или настроить скрипт, демонстрирующий проблему?   -  person badAdviceGuy    schedule 24.02.2014
comment
@OP, вы пытаетесь сделать так, чтобы точки вашего логотипа выходили за пределы серой области?   -  person aaron-bond    schedule 24.02.2014
comment
Предполагая, что вы хотите разместить «точки» над серой частью, вы можете просто присвоить изображению более высокий z-индекс, чем серый прямоугольник. Очевидно, убедитесь, что изображение в формате PNG без цвета фона, чтобы добиться полного эффекта.   -  person Nikki Mather    schedule 24.02.2014
comment
@NikkiMather В этом случае это должен быть отдельный элемент. Вы не могли использовать несколько фонов, которые предлагает CSS3.   -  person aaron-bond    schedule 24.02.2014
comment
Фоновые изображения не используют Z-индекс... они по определению находятся в фоновом режиме. Если вам нужно перекрывать элементы, они должны быть встроенными (в HTML).   -  person Paulie_D    schedule 24.02.2014
comment
Извиняюсь, предполагалось, что он будет использовать изображение вместо фонового изображения. Я пропустил упоминание этой части.   -  person Nikki Mather    schedule 24.02.2014

Ответы (1)


arrow_upward
0
arrow_downward

Поместите изображение/логотип заголовка в новый тег <img>, который будет размещен в верхней части страницы. Это даст вам гораздо больший контроль над позиционированием, чем то, что вы делаете сейчас, и позволит вам использовать z-index.

Если вы хорошо разбираетесь в HTML/CSS, я бы рекомендовал создать заголовок <div> и установить фон для этого элемента div (а также z-индекс). Это даст вам больше возможностей в дальнейшем, но более простой вариант — использовать тег <img>.

Вот jsFiddle с некоторыми примерами, которые могут вам помочь: http://jsfiddle.net/tMhs7/1/

person aaron-bond    schedule 24.02.2014
comment
Спасибо, я попробовал это, однако теперь у меня проблемы с центрированием моего логотипа. Вот мое тело CSS img { position:absolute; поле: 0 авто; верхнее поле: -18px; z-индекс:-1; } - person user3347513; 24.02.2014
comment
Без проблем. Я создал JSFiddle с несколькими примерами, чтобы помочь вам. Я надеюсь, что они помогут! - person aaron-bond; 24.02.2014