Автоматического изменение размера фон с текстом и annimated GIF вложен

Question

Пожалуйста, обратите внимание на troop981.com:

В Mountains.jpg с eagle.gif и редактируемый текст выглядит, как он висит на край страницы при просмотре на разных размерах мониторов или при увеличении.

Я хочу сделать Mountains.jpg, а текст поверх jpg изменяет размер и ширину пропорционально просмотру пользователей.

Код ниже является HTML-страницей страницы. Я был бы признателен за любую помощь, поскольку я не знаю ничего о HTML или CSS, и человек, который создал сайт, больше не с нами.

<style> 
    .background_image 
    { 
    background:url(http://www.troop981.com/default/portals/0/Tatra_Mountains_Panorama_01.jpg);  /* image to display */ 
    width:1602px;      /* width of image */ 
    height:332px;     /* height of image */ 
    overflow:hidden;     /* so div won't change size */ 
    } 
    .eagle_image 
    { 
    height: 222px; /* use the actual height of the eagle gif */ 
    width: 250px; /* use the actual width of the eagle gif */ 
    background:url(http://www.troop981.com/default/portals/0/0049.gif) no-repeat; /* use your eagle filename */ 
    position: absolute; top: 50px; /* adjust these to see the eagle move to where you want */ 
    left: 40px;        /* ditto from above */ 
    } 
    .text_properties 
    { 
    padding-left:2px;    /* position of text in inner div */ 
    padding-top:2px;     /* position of text in inner div */ 
    padding-right:2px;    /* position of text in inner div */ 
    padding-bottom:2px;    /* position of text in inner div */ 
    color:darkgreen;     /* text color */ 
    font-size:40px;     /* font size */ 
    font-weight:bold;    /* font weight */ 
    font-family:script;    /* font family */ 
    margin-left:400px;     /* left position of text */ 
    margin-top:50px;     /* top position of text */ 
    } 
</style> 
<div class="background_image"> 
<div class="eagle_image"></div> 
<div class="text_properties">Congratulations to Patrick Guilfoy &ndash; Troop 981&rsquo;s 104th Eagle Scout</div> 
</div> 

Answer 1

Почему вы хотите уменьшить масштаб изображения на заднем плане? Я думаю, что лучше не уменьшать масштаб, а просто, чтобы сделать текст масштабируемым, когда вы просматриваете страницу меньшего размера.

Попробуйте изменить .background_image с этим:

.background_image 
    { 
    background:url(http://www.troop981.com/default/portals/0/Tatra_Mountains_Panorama_01.jpg);  /* image to display */ 
    width:100%;      /* width of image */ 
    height:332px;     /* height of image */ 
    overflow:hidden;     /* so div won't change size */ 
    } 

Таким образом, это будет просто уменьшить ширину фонового изображения (а не высота) и Tekst будет адаптироваться к размеру экрана.