I'm having trouble getting the images to resize properly to fit the browser window just like the background image. I've tried using
max-width:100%;
height:auto;
max-height:100%;The images don't seem to resize correctly when I adjust the size of the browser window. They end up moving around instead of staying in place. Any suggestions on what I might be missing?
body{
background: url(http://www.planwallpaper.com/static/images/518169-backgrounds.jpg)no-repeat center center fixed;
background-size: 100%;
}
.boat2{
width: 400px;
position:absolute; bottom: 160px; left: 800px;z-index: 1;
}
.cabbage{
width: 150px;
position:absolute; bottom: 290px; right: 290px;z-index: 1;
}
.sheep{
width: 150px;
position:absolute; bottom: 300px; right: 180px;z-index: 1;
}
.wolf{
width: 300px;
position:absolute; bottom: 270px; right: -80px;z-index: 1;
}
img {
max-width:100%;
height:auto;
max-height:100%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>IQ River Crossing</title>
</head>
<body>
<div class="image">
<img class="boat2"src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
<img class="cabbage" src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
<img class="sheep" src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
<img class="wolf" src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
</div>
</body>
</html>