I've been working on a webpage with rotating background images, and everything looked perfect on my localhost. But once I uploaded it to the server and viewed it in different browsers, some of the people in the images were not positioned as intended, leading to varying results across browsers.
Here is the CSS code I'm currently using:
.animate-this .img1,
.animate-this .img3 {
clear: left;
display: block;
width: 100%;
height: 1210px;
margin-left: auto;
margin-right: auto;
}
.animate-this .img2 {
clear: left;
display: block;
width: 1620px;
height: 1210px;
margin-left: auto;
margin-right: auto;
background-color: #2b292b;
background-repeat: no-repeat;
}
.animate-this .img4 {
clear: left;
display: block;
width: 1522px;
height: 1210px;
background-color: #2b292b;
background-repeat: no-repeat;
}