I'm working on a responsive website and facing an issue with displaying a div in the background at a specific point. Every time I resize the browser, the div ends up moving to a different random location. Check out this fiddle (couldn't attach the background image in the fiddle) Background Image: blue background with a gray stamp. Here's the code snippet:
<!DOCTYPE HTML>
<html>
<head>
<link href="jsfiddle.css" rel="stylesheet" type="text/css" />
<style>
body{margin:0 auto;padding:0;font: 0.8em Arial,sans-serif;}
.jsfiddle {
float:left;
display:block;
background-image: url(Images/jsfiddle.jpg);
width:45%;
height:240px;
z-index:1; }
.con1{
float:right;
padding:6% 2% 0 0;}
.con1 a{
text-decoration:none;
font-weight:bold;
color:#1f5198;
padding-top:1%;}
</style>
</head>
<body>
<div class="jsfiddle">
<div class="con1"><a href="#">Click here for <br> information on
<br> CEO<br> Conference <br> October 9-10 </a>
</div>
</div>
</body>
</html>