Сделать изображение процентом экрана, а не пикселями? ⇐ Html

[Anonymous]

Для моего курса веб-разработки у меня есть 3 изображения: при нажатии на одно из них начинается гонка, а два других бегут по экрану. На моем домашнем компьютере изображения располагаются на экране почти идеально, и когда гоночные изображения доходят до конца, они переходят изображение, с которого оно начинается. В школе изображения, движущиеся по экрану, не будут пересекать изображение, с которого оно начинается, потому что оно выше, а два других изображения меньше, поскольку они в пикселях. Как я могу получить изображение, которое начинает гонку, чтобы оно занимало почти половину экрана, а два других изображения, когда они находятся друг над другом, будут почти вдвое меньше?
У меня есть код JavaScript, но он предназначен только для того, чтобы заставить изображения двигаться.
Вот изображения тела:








and the winner is...




Вот код стиля:

body {
background-image: url(home.png);
background-repeat: no-repeat;
background-size: 100%;
}
div.raceTrack {
position: fixed;
margin: auto;
bottom: 0px;
left: 0px;
}
div#location{
position: absolute;
top: 0px;
right: 0px;
}
img {
display: inline-block;
position: relative;
transition: all 0.2s;
}
div#announce {
position: fixed;
margin: auto;
top: 0px;
left: 0;
right: 0;
height: 10em;
width: 10em;
text-align: center;
transition: all 0.5s;
}
.hidden {
opacity: 0;
top: 0px;
bottom: 0px;
}



Подробнее здесь: https://stackoverflow.com/questions/401 ... not-pixels