Estoy haciendo una pagina principal de un proyecto.
Con full resolucion se ven bien sus elementos (logo "zoo park" y boton jugar)
Pero cuando empiezo a disminuir la resolucion, se cortan los elementos. Aca se ve como se corta el boton jugar:
Alguna idea de como puedo resolver este problema?
Mi html + css:
#outPopUp {
/* This image will be displayed fullscreen */
background:url(../images/logo_granja_6.gif) no-repeat center center;
/* The Magic */
background-size:cover;
position: absolute;
left: 15%;
bottom:20%;
width: 65%;
height: 85%;
}
.btn-enter {
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
background: url(../images/btn_jugar3.png) no-repeat center center;
background-size:cover;
position:absolute;
top: 70%;
left: 27%;
width:40%;
height: 25%;
}
.btn-enter:hover {
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
background: url(../images/btn_jugar3.png) no-repeat center center;
background-size:cover;
position:absolute;
top: 70%;
left: 26%;
width:41%;
height: 25%;
}
.btn-enter:active {
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
background: url(../images/btn_jugar3.png) no-repeat center center;
background-size:cover;
position:absolute;
top: 70%;
left: 24%;
width:43%;
height: 25%;
}
<div class="preview-item shake shake-slow" id="outPopUp"></div>
<button type="button" class="btn btn-enter"></button>
img
en lugar debutton
, con img no sera necesario el background, entonces como son porcentajes se reajustara con el zoom