Вытащить bacground image на передний план?

@Cdelphi78 · Регистрация: 21.02.2014

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

Привет! Как вытащить блок с background image на передний план а другой блок задвинуть, z-index не помогает.

Добавлено через 9 минут
Пишу мини-костыль такой...

@mrBobrillo · 24.11.2015, 00:29

Прикрепляйте код

@Cdelphi78 · 24.11.2015, 00:55 **[ТС]**

Вот

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .bl-one-plane {
        position:relative;
        background-image:url(http://static.smartafisha.ru/photo/training/94/34/94340/photo_small_753411_54636727e0342.jpg) no-repeat; 
        width:200px;
        height:200px;
        z-index:99;
            
        }
        
        .bl {
            position:relative;
            width:300px;
            height: 300px;
            background: #fa3;
            z-index:1;
            
        }
    </style>
</head>
<body>
    <div class="bl">
    <div class="bl-one-plane">
        <h1>Заголовок 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, aperiam!</p>
    </div>
    </div>
</body>
</html>

Блок bl-one-plane должен находится на переднем плане.

@mrBobrillo · 24.11.2015, 01:47

Держите http://jsfiddle.net/b1cg2vnv/250/
Можно делать и 2м бекграундом

CSS

1	background: #fa3 url([url]http://static.smartafisha.ru/photo/training/94/34/94340/photo_small_753411_54636727e0342.jpg[/url]) no-repeat;

@Cdelphi78 · 24.11.2015, 01:53 **[ТС]**

пробовал, цвет затирает картинку)

Добавлено через 1 минуту
Ну может я где то ошибся,ладно завтра гляну.

@Karssen · 24.11.2015, 09:44

Попробуйте местами поменять url и цвет.

@winner_ua · 24.11.2015, 13:55

Cdelphi78, в вашем коде неправильна запись

CSS

1	background-image:url([url]http://static.smartafisha.ru/photo/training/94/34/94340/photo_small_753411_54636727e0342.jpg[/url]) no-repeat;

нужно использовать либо

CSS

1 2	background-image: url([url]http://static.smartafisha.ru/photo/training/94/34/94340/photo_small_753411_54636727e0342.jpg);[/url] background-repeat: no-repeat;

либо использовать shorthand

CSS

1	background: url([url]http://static.smartafisha.ru/photo/training/94/34/94340/photo_small_753411_54636727e0342.jpg[/url]) no-repeat;

По вашему примеру есть заметка, почему не работает:

Вложенность играет важную роль. Родительский элемент всегда останется выше своих дочерних элементов, какое бы значение z-index у него не было.

Поэтому необходимо разместить слои на одном уровне по иерархии и тогда смена значений у свойства z-index будет работать корректно, посмотрите пример - http://fiddle.jshell.net/4fht0657/

@Cdelphi78 · 24.11.2015, 14:02 **[ТС]**

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

Родительский элемент всегда останется выше своих дочерних элементов, какое бы значение z-index у него не было.

а можно как то перебить его?

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

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

Cdelphi78, в вашем коде неправильна запись

Да да забываюсь что нельзя так делать.

@Shakalaka · 24.11.2015, 14:34

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

Родительский элемент всегда останется выше своих дочерних элементов, какое бы значение z-index у него не было.

Не пишите бред

@winner_ua · 24.11.2015, 14:35

Shakalaka, https://css-tricks.com/almanac... z/z-index/

"Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B."

@Shakalaka · 24.11.2015, 14:41

winner_ua, ссылку вы привели, а вот перевести её у вас не получилось.
В той статье говорится, что если у элемента z-index меньше чем у перекрывающего его элемента, то дети этого "перекрытого" элемента не могут быть выше перекрывающего элемента. А то что вы написали бред. Если бы элемент был выше своих потомков их бы просто не было видно

@winner_ua · 24.11.2015, 14:45

Shakalaka, отлично, молодцы, что вы помогли правильно перевести топикстартеру значение правила, надеюсь, ему это поможет.

@Shakalaka · 24.11.2015, 14:50

winner_ua, все что нужно было ТС - это правильно написать правило для background.(background-image отдельно, background-repaet отдельно) и фон потомка будет сверху фона родителя, и не нужен там z-index. А вы ему про z-index лепите, да еще и не правильно, так что возмущения ваши тут неуместны.

@Cdelphi78 · 25.11.2015, 09:54 **[ТС]**

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

winner_ua, все что нужно было ТС - это правильно написать правило для background.(background-image отдельно, background-repaet отдельно) и фон потомка будет сверху фона родителя, и не нужен там z-index. А вы ему про z-index лепите, да еще и не правильно, так что возмущения ваши тут неуместны.

Не работает.

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .bl-one-plane {
        
        background-image:url(http://static.smartafisha.ru/photo/training/94/34/94340/photo_small_753411_54636727e0342.jpg); 
        background:no-repeat;
        width:200px;
        height:200px;
        
            
        }
        
        .bl {
            
            width:300px;
            height: 300px;
            background: #fa3;
            
            
        }
    </style>
</head>
<body>
    <div class="bl">
    <div class="bl-one-plane">
        <h1>Заголовок 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, aperiam!</p>
    </div>
    </div>
</body>
</html>

@Shakalaka · 25.11.2015, 11:10

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

Не работает.

учите синтаксис

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

background:no-repeat;

background-repeat:no-repeat;

@Cdelphi78 · 25.11.2015, 11:28 **[ТС]**

заработало))

@winner_ua 10 / 10 / 6 Регистрация: 27.08.2015 Сообщений: 42
	24.11.2015, 14:45	12
	Shakalaka, отлично, молодцы, что вы помогли правильно перевести топикстартеру значение правила, надеюсь, ему это поможет. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	25.11.2015, 11:28 [ТС]	16
	заработало)) 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	24.11.2015, 00:29	2
	Прикрепляйте код 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	24.11.2015, 01:53 [ТС]	5
	пробовал, цвет затирает картинку) Добавлено через 1 минуту Ну может я где то ошибся,ладно завтра гляну. 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	24.11.2015, 09:44	6
	Попробуйте местами поменять url и цвет. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	24.11.2015, 14:02 [ТС]	8
	Сообщение от winner_ua Родительский элемент всегда останется выше своих дочерних элементов, какое бы значение z-index у него не было. а можно как то перебить его? Добавлено через 1 минуту Сообщение от winner_ua Cdelphi78, в вашем коде неправильна запись Да да забываюсь что нельзя так делать. 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	24.11.2015, 14:34	9
	Сообщение от winner_ua Родительский элемент всегда останется выше своих дочерних элементов, какое бы значение z-index у него не было. Не пишите бред 0

@winner_ua 10 / 10 / 6 Регистрация: 27.08.2015 Сообщений: 42
	24.11.2015, 14:35	10
	Shakalaka, https://css-tricks.com/almanac... z/z-index/ "Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B." 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	24.11.2015, 14:41	11
	winner_ua, ссылку вы привели, а вот перевести её у вас не получилось. В той статье говорится, что если у элемента z-index меньше чем у перекрывающего его элемента, то дети этого "перекрытого" элемента не могут быть выше перекрывающего элемента. А то что вы написали бред. Если бы элемент был выше своих потомков их бы просто не было видно 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	24.11.2015, 14:50	13
	winner_ua, все что нужно было ТС - это правильно написать правило для background.(background-image отдельно, background-repaet отдельно) и фон потомка будет сверху фона родителя, и не нужен там z-index. А вы ему про z-index лепите, да еще и не правильно, так что возмущения ваши тут неуместны. 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	25.11.2015, 11:10	15
	Сообщение от Cdelphi78 Не работает. учите синтаксис Сообщение от Cdelphi78 background:no-repeat; background-repeat:no-repeat; 1