<!–DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>BG Sizing</title>
<style type=”text/css”>
body {
margin: 0;
padding:0;
font: 100% Georgia, “Times New Roman”, Times, serif;
background: #3c6b92;
}
#wrapper {
margin: 0 auto;
width: 50%;
height: 1000px;
background: #fff;
padding: 50px 0 0 200px;
}
#wrapper div {
float: left;
margin-right: 50px;
background: #e1d8b9;
}
#wrapper #one {
width: 50%;
height: 320px;
background: #e1d8b9 url(star.png) no-repeat;
background-size: 100%;
/*contain – escala hasta que el ancho o el alto tocan los bordes del contenador /
cover – rellana el contenedor con el tamano real de la imagen incluso cuando se corta
/ 100% – para disposicion flexible*/
}
#wrapper #two {
width: 50%;
height: 500px;
background-image: url(callOut_top.jpg), url(trivia_bottom.png);
background-position: left top, right bottom;
background-repeat: no-repeat;
padding-bottom: 50px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”one”>
</div>
<div id=”two”>
aqui lo que tenemos son dos imagenes de fondo
</div>
</div>
</body>
</html>