Hello...I m making a website in html/css......But there is a huge prob in it that when ever i make the size of my browser window small all the pictures in my website change its position,,like they all shift slightly towards right...I have made my dackground by multiple background positioning property in css3....when i make my browser window small all my images move e toward right but my background remains at the same position which results into some images remain on the background else on the white screen...plzz help me out..I have to sublit my project as soon as possible..here is my code
Code:
<style type="text/css">
*{margin:0px; padding:0px;}
#multi span{position:absolute;
top:2%;
left:40.5%;
color: #e1da0e;
font-size:450%;
}
#multi{
background-image: url(menu_bckg.jpg) , url(content_bckg.jpg), url(logo_bckg.jpg), url(main_bckg.jpg), url(c.jpg);
background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size:54% 5%, 54% 80.3%, 54% 20%, 66% 100%, cover;
background-position:50.1% 15.6%, bottom, center top, center, left top;
position: absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
}
#navcon{position:absolute;
top:14.7%;
left:23.5%;
}
#nav{width:377px; height:50px;position:relative;color:#1e7909;
font-family:ariel; margin:0px auto;font-size:1em;}
#nav ul{list-style-type:none;}
#nav ul li{float:left;position:relative;}
#nav ul li a{solid #1e7909;padding:6px;display:block;
text-decoration:none;text-align:center;}
#nav ul li ul{display:none;}
#nav ul li a:hover{background:#1e7909;color:#ecf7ea;}
#nav ul li:hover ul{display:block; position:absolute;}
#nav ul li:hover ul a:hover{background:#bcee68;color:black;}
#nav ul li:hover ul li a{background:#ffe4e1;color:black;display:block;
border-bottom:1px solid #1e7909;border-right:none;width:85px;}
.top{border-top:1px solid #1e7909;border-left:1px solid #1e7909;
border-right:1px solid #1e7909}
#img{position:absolute;
top:70px;
left:30px;}
#name{position:absolute;
top:235px;
left:18px;
}
#img{position:absolute;
top:190%; left: 10%;}
#img2{position:absolute;
top: 500%; left:10%;
}
#img3{position:absolute;
top:810%; left:10%;}
#img4{ position: absolute;
top:190%;
left:150%;
}
#img5{position:absolute;
top:500%; left:150%;}
#img6{position: absolute;
top:810%; left:150%;}
#img7{position: absolute;
top:190%; left:80%;}
#img8{position: absolute;
top:500%; left:80%;}
</style>
</head>
<body>
<div id="multi"><span><font face="coca cola ii">Golden Era</font></span></div>
<div id="navcon">
<div id="nav">
<ul>
<li><a href="multi.html">Home</a></li>
<li><a href="#">Miscellaneous</a>
<ul>
<li class="top"><a href="#">Duets</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<a href="rafi.html">
<div id="img"><input type=image height="120px" width="120px" border="4px" src="rafi.jpg"/><br><b><i><u><font size=3>Mohammad Rafi</i></u></b></font></div>
</a>
<a href="music.html">
<div id="img2"><input type=image height="120px" width="120px" border="4px" src="kishor.gif"/><br><b><i><u><font size=3>Kishore Kumar</i></u></b></font></div>
</a>
<a href="music.html">
<div id="img3"><input type=image height="120px" width="120px" border="4px" src="manna.jpg"/><br><b><i><u><font size=3>Manna Dey</i></u></b></font></div>
</a>
<a href="music.html">
<div id="img4"><input type=image height="120px" width="120px" border="4px" src="mukesh.jpg"/><b><i><u><font size=3>Mukesh Chand</i></u></b></font></div>
</a>
<a href="music.html">
<div id="img5"><input type=image height="120px" width="120px" border="4px" src="mahinder.jpg"/><b><i><u><font size=3>Mahinder Kapoor</i></u></b></font></div>
</a>
<a href="music.html">
<div id="img6"><input type=image height="120px" width="120px" border="4px" src="bhupen.jpg"/><b><i><u><font size=3>Bhupen Hazarika</i></u></b></font></div>
</a>
<a href="music.html">
<div id="img7"><input type=image height="120px" width="120px" border="4px" src="lata.jpg"/><b><i><u><font size=3.5>Lata Mangeshkar</i></u></b></font></div>
</a>
<a href="music.html">
<div id="img8"><input type=image height="120px" width="120px" border="4px" src="asha.jpg"/><b><i><u><font size=4>Asha Bhosle</i></u></b></font>
</div>
</a>
Comment