Как переместить фон абзаца, под др слой

@desnew · Регистрация: 29.03.2013

Author24 — интернет-сервис помощи студентам

Как переместить фон абзаца(background-position), под др слой, чтобы этот слой с текстом не закрывал фон?
Спасибо.

@KaRaNTiN · 29.03.2013, 19:41

background-position отвечает лишь за позицию фона в Вашем случае в абзаце. Т.е., если у Вас какая-то маленькая точка на заднем фоне, и Вы хотите, чтобы точка была, например, слева блока - указываете background-position: left.

Нельзя фон одного блока переместить под другой (: Создайте <div>, задайте ему width, height и background и таскайте по странице как Вам удобно)

@desnew · 29.03.2013, 19:48 **[ТС]**

Сообщение от KaRaNTiN

background-position отвечает лишь за позицию фона в Вашем случае в абзаце. Т.е., если у Вас какая-то маленькая точка на заднем фоне, и Вы хотите, чтобы точка была, например, слева блока - указываете background-position: left.

Нельзя фон одного блока переместить под другой (: Создайте <div>, задайте ему width, height и background и таскайте по странице как Вам удобно)

Спасибо за ответ. Но тут вот какой случай из обучающего задания-

HTML5

<html>
<head>
<style type='text/css'>
#spidercont
{
height:1000px;
width:900px;
}
#text
{
color:grey;
width:250px;
height:280px;
}
#spidersquare
{
color:grey;
position:fixed;
top:50px;
right:100px;
border-style:solid;
border-width:1px;
width:250px;
height:280px;
}
p{
background-image:url(spider2.gif);
background-repeat: no-repeat;
background-position: 160px 50px;
 
}
 
</style>
<body>
<div id='spidercont'>
<p id='text'>1. Вставьте в данный элемент картинку паучка <b>spider2.gif</b> (картинка находится в папке редактора так что обращайтесь к ней просто по имени) 
с помощью свойства <b>background-image</b>. Изображение при этом не должно повторятся.</p>
</div>
<div id='spidersquare'>
2. Перенесите паучка в данную рамку с помощью свойства <b>background-position</b>. При этом при прокрутке страницы изображение паука должно оставаться в рамке.
</div>
<p> Текст набивка это текст набивка. </p>
<p> Текст набивка это текст набивка. </p>
<p> Текст набивка это текст набивка. </p>
<p> Текст набивка это текст набивка. </p>
<p> Текст набивка это текст набивка. </p>
</body>
</html>

и если сделать

CSS

#spidercont{
background-image:url(spider2.gif);
background-repeat: no-repeat;
background-position: 160px 50px;
 
}

То получается, но надо ведь поместить прямо в абзац.

@KaRaNTiN · 29.03.2013, 19:50

CSS

#spidercont p{
background-image:url(spider2.gif);
background-repeat: no-repeat;
background-position: 160px 50px;
}

пробуйте)

@Maksim2309 · 29.03.2013, 19:53

Свойство Z-Index - это по сути слой в html. Вот пример использования:

HTML5

1
2
3

<div id="g_image13" style="position:absolute; overflow:hidden; left:219px; top:189px; width:542px; height:49px; z-index:1"><img src="images/arc.gif" alt="" title="" border=0 width=542 height=49></div>
 
<div id="g_shape2" style="position:absolute; overflow:hidden; left:12px; top:254px; width:758px; height:535px; z-index:2"><img border=0 width="100%" height="100%" alt="" src="images/rect44720074.gif"></div>

Т.е. arc.gif будет за rect44720074.gif. Также можешь указать

HTML5

1	z-index:avto

.

@desnew · 29.03.2013, 20:01 **[ТС]**

Сообщение от KaRaNTiN

CSS

#spidercont p{
background-image:url(spider2.gif);
background-repeat: no-repeat;
background-position: 160px 50px;
}

пробуйте)

Вот это меня и запутало. Не получается.
Без p нормально, если только p, то слой закрывает рисунок.

Добавлено через 1 минуту

Сообщение от Maksim2309

Свойство Z-Index - это по сути слой в html. Вот пример использования:

HTML5

1
2
3

<div id="g_image13" style="position:absolute; overflow:hidden; left:219px; top:189px; width:542px; height:49px; z-index:1"><img src="images/arc.gif" alt="" title="" border=0 width=542 height=49></div>
 
<div id="g_shape2" style="position:absolute; overflow:hidden; left:12px; top:254px; width:758px; height:535px; z-index:2"><img border=0 width="100%" height="100%" alt="" src="images/rect44720074.gif"></div>

Т.е. arc.gif будет за rect44720074.gif. Также можешь указать

HTML5

1	z-index:avto

.

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

@desnew 0 / 0 / 0 Регистрация: 29.03.2013 Сообщений: 3
		1
	Как переместить фон абзаца, под др слой 29.03.2013, 19:32. Показов 3350. Ответов 5 Метки нет (Все метки) Как переместить фон абзаца(background-position), под др слой, чтобы этот слой с текстом не закрывал фон? Спасибо. 0

@KaRaNTiN 44 / 44 / 11 Регистрация: 10.06.2009 Сообщений: 311 Записей в блоге: 2
	29.03.2013, 19:41	2
	background-position отвечает лишь за позицию фона в Вашем случае в абзаце. Т.е., если у Вас какая-то маленькая точка на заднем фоне, и Вы хотите, чтобы точка была, например, слева блока - указываете background-position: left. Нельзя фон одного блока переместить под другой (: Создайте <div>, задайте ему width, height и background и таскайте по странице как Вам удобно) 0

	29.03.2013, 20:01