自动调整大小的背景，文本和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将调整到屏幕的大小。