Poner una imagen de fondo a un contenedor con CSS3 full responsive

Poner una imagen de fondo a un contenedor con CSS3

CSS
Poner una imagen de fondo a un contenedor con CSS3 full responsive

Poner una imagen de fondo a un contenedor con CSS3

Un gran tip que te permitirá poner alguna imagen deseada en la parte del fondo de una sección de tu pagina web totalmente responsive y rápido.

Seguramente notaste que muchas páginas web tienen esta temática de poner fondos para determinados sectores de su página, a veces hasta ponerlo en toda la página web.

Ahora con la evolución de CSS podemos hacer estos efectos, los cuales nos  ayuda con un poco de creatividad sacarle el máximo provecho.

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

html,body{
  color:white;
  font-family:'Opens Sans',helvetica;  
  height:100%;
  width:100%;
  margin: 0px;
}

.portada{
   background: url(https://www.purina.es/gato/purina-one/sites/g/files/mcldtz1856/files/2018-06/Mi_gato_me_muerde%281%29.jpg) no-repeat fixed center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   height: 100%;
   width: 100% ;
   text-align: center;

}
.text{
  margin: 30px 0px 30px 0px;	
  padding: 10px;
  background: rgba(0,0,0,0.5);
  display: inline-block;
}

Propiedades CSS determinantes

Lo que realmente hace que la imagen se posicione como fondo responsive es por background:no-repeat fixed center; que fija una imagen a la clase, identidad, o elemento html del CSS, la centra y obliga a no repetirla y hacerla imagen única.

Esta propiedad de CSS3 background-size: cover;es la encargada de adaptar la imagen a todo el tamaño del elemento elegido (class, id…etc) que en este caso sería la pantalla completa adaptable a todas las resoluciones. Su funcionamiento es de respetar la altura de la imagen y adaptar la imagen en ancho según la pantalla o el elemento al que se le de uso.

Cubrir con un div la pantalla completa

Para que puedas crear un div que se adapte a la resolución de toda la pantalla, debes dar las siguientes propiedades en CSS a body y html, height:100%;, width:100%; esto hace que estos elementos base principales del html, se adapte al total de la altura y anchura de la pantalla.

A continuación creamos un div contenedor en este caso la clase .portada en los que se vuelven a aplicar height: 100%; width: 100% ; para adaptar el div contenedor a la totalidad de la pantalla en ancho y alto.

<html lang="es">
<meta charset="UTF-8"/>
 
<head>
  </head>
<body>
<div class="portada">
		<div class="text">
			<h1> div con imagen de fondo responsive</h1> 
			<h3>Imagen adaptada a todas las resoluciones de pantalla</h3>
		</div>
</div>
  </body>
  </html>

 


¿Quieres el código fuente del proyecto
Poner una imagen de fondo a un contenedor con CSS3 full responsive?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

Visitado 281 veces | Publicado hace 8 meses

Más códigos de programación en CSS.

Ver scripts de CSS

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020