CODEWITHSUNDEEP
htmlcssimagecss-shapes
Aaron
Aaron

Reputation: 63

Place an image in front of CSS shapes

I'm having trouble getting an image to sit IN FRONT of two shapes generated in CSS and HTML. I have a rectangle and a top left triangle, but I need an image to sit in front of where these two join. JSFIDDLE: https://jsfiddle.net/fcj9k1w9/ 

<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>

Where the placehold.it image is, should be an image logo but I can't get it in front of the two shapes.

Ideally I'd like it to be over the 'seam' as it were - but if it could sit in the centre of the rectangle, that would be great too.

Any help with this is appreciated.

Upvotes: 0

Views: 4836

Answers (2)

GKS
GKS

Reputation: 338

try :before and :after with the div on which you want to show these shape. 

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


}

Upvotes: 0

Captain Quirk
Captain Quirk

Reputation: 376

You could use position: absolute for that.

For example:

HTML:

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

CSS:

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

Upvotes: 2

Related Questions