Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Background выше содержимого блока (https://javascript.ru/forum/xhtml-html-css/16003-background-vyshe-soderzhimogo-bloka.html)

MCTrane 22.03.2011 20:33
Background выше содержимого блока
 
Собственно, вопрос вот в чём:
Есть такой код:
<td><div style="background:url(imborder.png)"><img src="image.png"></div></td>

Заливка блока div - это рамка, но если image.png лежит на этом backgraond`е, т.е. на рамке, то не очень хорошо смотрится, поэтому надо чтобы background лежал на картинке. Ну, конечно, в мозиле, ие7 прокатил z-index:-1. Но, вот в ие8 картинка уходит вообще под background самого сайта, т.е. рамки пустые, картинок не видно.
Как можно решить этот вопрос кроссбраузерно?

ksa 22.03.2011 21:50
Цитата:
Сообщение от MCTrane
надо чтобы background лежал на картинке
Странное желание...

Ты бы хотьпример привёл с нормальными урлами, дабы посмотреть на сие чудо.

MCTrane 22.03.2011 22:20
Цитата:
Сообщение от ksa (Сообщение 97595)
Странное желание...

Ты бы хотьпример привёл с нормальными урлами, дабы посмотреть на сие чудо.
http://neocubs.ru/header-body.php

walik 22.03.2011 22:25
а почему бы просто не поставить картинку по верх картинки ?

MCTrane 22.03.2011 22:30
Цитата:
Сообщение от walik (Сообщение 97601)
а почему бы просто не поставить картинку по верх картинки ?
Каким образом?

walik 22.03.2011 22:36
Таким:
<style>
div.place {
	position: relative;
}

.image {
	position: absolute;
	top: 35px;
	left: 25px;
	z-index: 1;
}

.border {
	position: absolute;
	z-index: 2;
}
</style>
<div class="place">
	<img class="image" src="http://neocubs.ru/images/image-1.jpg" />
	<img class="border" src="http://neocubs.ru/images/border.png" />
</div>

MCTrane 22.03.2011 22:43
С абсолютной позицией не хочется связываться. Без неё реализовать можно как-то?

walik 22.03.2011 22:46
А чем абсолютная позиционирование вам мешает ? изображение позиционируется относительно div'у
Без позиционирование по моему нельзя, иначе как изображения налезут друг на друга.

ksa 23.03.2011 09:02
Цитата:
Сообщение от MCTrane
если image.png лежит на этом backgraond`е, т.е. на рамке, то не очень хорошо смотрится
Теперь немного понятнее стало после просмотра картинок...

Если у тебя размеры картинок нужного размера - делай их бекграундом. А рамку накладывай сверху, но у неё внутренности прозрачные должны быть.

walik 23.03.2011 09:36 
<style>
.place {
	background-image: url(http://neocubs.ru/images/image-1.jpg);
	background-repeat: no-repeat;
	background-position: 25px 35px;
	width: 235px;
}
</style>
<div class="place">
	<img class="border" src="http://neocubs.ru/images/border.png" />
</div>

ksa 23.03.2011 11:00
walik, уместнее применить

background-position: center center;

ksa 23.03.2011 11:04
Или так

<style>
.place {
	background-image: url('http://neocubs.ru/images/image-1.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	width: 235px;
	height: 170px;
}
.border {
	background-image: url('http://neocubs.ru/images/border.png');
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: 100%;
}
</style>
<div class="place">
	<div class="border"></div>
</div>

MCTrane 23.03.2011 17:52
Ясно, спасибо

MCTrane 23.03.2011 19:57
Убрал DOCTYPE, всё норм стало :)


Часовой пояс GMT +3, время: 00:08.