[css] вставка картинки "над" блоком

feliks28

В общем есть div, для простоты зеленого цвета. А фон у страницы, допустим, ужасно красный, для контраста.
Нужно средствами только css (потому что настройка отображения на том сайте только перекрывающими стилями) вставить НАД div'ом картинку с полупрозрачными вкраплениями (т.е. чтобы в этих дырках был виден фон страницы (красный а не фон div'а (зеленый
Конечно, желательно кроссбраузерное решение, но и просто много где доступное тоже подойдет.
Я забил на IE и попробовал через :before, но как вставить html я не понял (а можно ли? а если вставлять просто через content: url картинку, то она вставляется внутри div'а и слева, а не НАД, поэтому margin действует только влево-вправо...
Задача имеет решение?

artimon

position: absolute у картинки не катит?

feliks28

Да вроде как нет: div - он как минимум по горизонтали свободно плавает (а если локально размер шрифтов менять, то и по вертикали)

Да и что-то не действует position (FF 2.0.0.11) на :before :crazy:

artimon

Самому диву можно какой-нибудь стиль написать?
Внутри дива ты можешь что угодно писать?

feliks28

Стили да, чему угодно.
А html никуда не могу...

Fragaria

Внутрь дива ставляешь ещё один див с position relative, в него - див с position absolute и с отрицательным сдвигом.
UPD: блин, ты ж хтмл вставлять не можешь, сорри.

artimon

<div style="position: relative"> <>

<img ... style="position: absolute; top: -100px; left: 0">

...

</div>

Картинка будет на 100 пикселей выше дива.

feliks28

Картинка - она не img... Картинка она
#green_div:before
{
content: url("image.gif");
}
А html в content'е оно не понимает...
Я может не совсем четко сформулировал: проблема не позиционирования существующей картинки, а вставить и спозиционировать картинку, которой нет...

artimon

Если есть возможнось создавать файлы, то можно написать .xbl.
Может есть какие-нибудь знания о том, что находится внутри div'а?

feliks28

Все управление стилями выглядит так: мы в админ-панели пишем абсолютно любой css и он вставляется в head/style перекрывая стандартный css. На этом наше вмешательство в стиль заканчивается...
В принципе я уже отказался от :before (элемент отличный, но, видимо, не для такого масштаба действий) и попутно от прозрачности и сделал через фиксированный background: http://test1.blogsuper.ru/
Пока смущает только, что за последние часа два испробовал все пришедшие мне в голову идеи, но добиться того, чтобы левая и правая колонки независимо от содержания продолжались донизу у меня не получилось...

artimon

У #main_content сделай border-left: 180px solid #color0; вместо margin-left: 180px;

feliks28

Блин! Ты гений!

Пасибищще!

feliks28

Эхх, красивейшее решение, что я видел, но в IE правая колонка съезжает вниз...
Правда я подозреваю, что это я уже чего-нибудь навертел ночью и не удалил...

Оставить комментарий