Вот кое-что, что должно дать вам отправную точку.Основная хитрость заключается в использовании position:absolute.Я рекомендую вам прочитать о том, что это значит .По сути, он позволяет вам указывать точные пиксельные координаты элементов вашей страницы.
Обратите внимание, что размеры, которые вы задаете в своем вопросе, немного странные. Вы, например, говорите, что размер фрукта составляет 690x180.Но когда я смотрю на изображение, кажется, что фрукты в основном квадратные.Возможно, в вашем изображении много прозрачного пространства?Непонятно, не увидев сами изображения.
Кроме того, на реальном сайте вам, вероятно, понадобится еще одно вложенное <div> для самого текста внутри желтого поля.
В любом случае, здесьЭто пример, который использует только цветные прямоугольники в приблизительном расположении, которое показывает ваше изображение:
<html>
<head>
<style type='text/css'>
.back {
position:absolute;
background-color:gray;
width:700px;
height:400px;
left:0;
top:0;
text-align:right; /* just to make the text readable in this example */
}
.text {
position:absolute;
background-color:yellow;
width:600px;
height:300px;
left:50px;
top:50px;
text-align:right; /* just to make the text readable in this example */
}
.fruit {
position:absolute;
background-color:red;
width:300px;
height:380px;
left:10;
top:10;
}
</style>
</head>
<body>
<div class='back'>the background</div>
<div class='text'>the yellow area</div>
<div class='fruit'>put the fruit image here</div>
</body>
</html>
Есть много других способов сделать это, конечно, в зависимости от того, как вы разрежете свои изображения.