Поместите изображение перед фигурами CSS

У меня возникли проблемы с получением изображения, чтобы сидеть В FRONT из двух форм, сгенерированных в CSS и HTML. У меня есть прямоугольник и верхний левый треугольник, но мне нужно изображение, чтобы сидеть перед тем, где эти два соединяются. JSFIDDLE: https://jsfiddle.net/fcj9k1w9/Поместите изображение перед фигурами CSS

<title>LOCALHOST</title> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link href="css/animate.min.css" rel="stylesheet"> 
<link href="css/font-awesome.min.css" rel="stylesheet"> 
<link href="css/lightbox.css" rel="stylesheet"> 
<link href="css/main.css" rel="stylesheet"> 
<link id="css-preset" href="css/presets/preset1.css" rel="stylesheet"> 
<link href="css/responsive.css" rel="stylesheet"> 

<!--[if lt IE 9]> 
    <script src="js/html5shiv.js"></script> 
    <script src="js/respond.min.js"></script> 
<![endif]--> 

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'> 
<link rel="shortcut icon" href="images/favicon.ico"> 

<body> 

<!--.preloader--> 
<div class="preloader"> <i class="fa fa-circle-o-notch fa-spin"></i></div> 
<!--/.preloader--> 

<header id="home"> 
<div id="home-slider"> 
<img src="http://placehold.it/500x200" style="position:relative; margin-left:auto; margin-right:auto;"> 
<div id="rectangle-one"></div> 
<div id="triangle-one"></div>

Где placehold.it изображение должно быть изображение логотипа, но я не могу получить его перед двумя формами.

В идеале я бы хотел, чтобы это было над «швом», но если бы оно могло сидеть в центре прямоугольника, это тоже было бы здорово.

Любая помощь с этим оценивается.

источник

2016-01-18 Aaron

'позицию: абсолютная;' на изображение ... Но вы должны быть более умным с полями, или абсолю CSS сгенерирован и управлять вашим 'г-index' Есть несколько способов! – Pogrindis

Вы можете использовать положение: абсолютное для этого.

Например:

HTML:

<img src="http://placehold.it/500x200" class="overlayLogo">

CSS:

.overlayLogo { 
    position:absolute; 
    z-index: 99999; 
    top: 0; 
    left:0; 
}

источник

2016-01-18 12:06:17

Отлично! Спасибо, именно то, что я ищу! – Aaron

Это 'z-index' хотя! >. Pogrindis

Как бы я мог это сделать в центре страницы, пожалуйста? Способ, которым я это делаю, не работает 100% для отзывчивого – Aaron

попробовать: до и: после того, как с DIV, на котором вы хотите, чтобы показать эти формы.

#somediv::before{ 
position:absolute; 
content : 'x'; 
top:0; 
left:0; 
width:20px; 
height:20px; 
background:gray; 


}

источник

2016-01-18 12:09:42

Поместите изображение перед фигурами CSS

ответ

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