CSS background image adaptive element size

One or one methods for comparing soils are, placed on the ground floor.

Here's how:

CSS code:

img { position:absolute; z-index:-10; width:50%;}  

Html:

<src= "background picture path"/>  <span> Word on the background </span>  

At this point, the background can be automatically scaled, but the underlying image and the above word is unrelated, want to keep the corresponding relationship between the screen changes, need to use a percentage to indicate the spacing and size.
This approach can be achieved, but the personal feeling is not very normative, but there is no better way.

Second, the CSS3 has the background dimension attribute Background-size, is really the front-end gospel

Here's how:

Div {      width:200px;       height:100px;       background-image:url (bg.jpg);       background-size:100% 100%;  }  

Html:

< Div > picture extension </div>  

I only recorded the picture filled with the whole element, background-size and other uses to keep the picture aspect ratio.

CSS background image adaptive element size