2016-04-26 3 views
1

я работаю над этим website (с Wordpress построенном) и я пытаюсь установить это image как фиксированной левой фоне выше весь контент сайта.Как представить тело фоновое изображение выше содержание

Через CSS я пытаюсь это

body { 
background-image: url("http://birsmatt.ch/de/wp-content/uploads/2016/04/bg_left.png"); 
background-position: left; 
background-repeat: no-repeat; 
z-index: 1; 
} 

... но z-index не работает.

Любой отзыв?

Спасибо за консультацию.

ответ

1

Внутри тела - весь контент вашего сайта. Поэтому, если вы установите фон, это будет за всем содержимым тела.

Вы можете создать новый элемент внутри тела с размером тела и указать, что фон вам нужен.

Пример:

#background { 
 
    background-image:url('http://birsmatt.ch/de/wp-content/uploads/2016/04/bg_left.png'); 
 
    background-position:left; 
 
    background-repeat:no-repeat; 
 
    
 
    height:100%; 
 
    width:100%; 
 
    z-index:1; 
 
    position:absolute; /* make it overlap your website content */ 
 
}
<body> 
 
    
 
    <div id='background'></div> 
 
    
 
    <div id='rest of your content'> 
 
    ... 
 
    </div> 
 

 
</body>

+1

Или использовать псевдо-элемент, чтобы избежать дополнительной разметки: 'тело: before' – isherwood

+0

@isherwood - я думал то же самое, но зависит от того, или нет OP хочет поддерживать старые браузеры – EdwardM

+0

Кроме того, я не уверен, что вы хотите установить ширину на 100%, div охватывает всю страницу и, следовательно, вы не можете взаимодействовать с ней (щелкните по ссылкам). Установите ширину 60 пикселей? https://jsfiddle.net/9dhgo1u1/3/ – EdwardM

Смежные вопросы