In my HTML code, I am utilizing multiple div elements. Each div is designated to hold an image with dimensions of 1600*750. Within each div, there is a fixed image that repeats across all the divs by using a specified class. Here are the details for each fixed image: - The first image measures 218*73 - The second image measures 774*209 - The third image measures 127*37
My goal is to set the position of these fixed images within the background div image as follows: - Position the first image at 137*88 - Position the second image at 655*339 - Position the third image at 708*670
It is important for me not to use the body element to fix the background image since I have multiple divs each containing three fixed images.
I am seeking assistance on how to achieve this positioning using CSS classes for multiple divs. Thank you in advance!
Below is the structure of my HTML and CSS:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My page</title>
<title>jQuery Parallax Plugin Demo</title>
<link rel="stylesheet" type="text/css" href="sd.css" />
</head>
<body>
<div id="a">
<div id="first" >
<div class="c d" >
This is my first div to display image.
</div>-->
</body>
</html>
CSS
body{
margin: 0;
min-width: 980px;
padding: 0;
padding: 0;
}
div {
-webkit-perspective: 500px; /* Chrome, Safari, Opera */
perspective: 500px;
}
#first{
width: 100%;
}
#first{
background:url('images/rc1.jpg') 50% 0 no-repeat fixed;
color: white;
height: 600px;
margin: 0 auto;
padding: 160px 0 0 0;
padding: 0;
perspective: 1px;
}
#first .d{
margin: auto;
position: relative;
width:=655px;
height:339px;
background: url('images/Logo.png');
background-repeat: no-repeat;
background-attachment: fixed;
}
#first .c{
margin: auto;
position: relative;
width:=137px;
height:88px;
background: url('images/big_text.png');
background-repeat: no-repeat;
background-attachment: fixed;
}
#first .e{
margin: auto;
position: relative;
overflow-x: 708px;
overflow-y: 670px;
background: url('images/big_text.png');
background-repeat: no-repeat;
background-attachment: fixed;
}