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

Poner una imagen de fondo a un contenedor con CSS3

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>

 

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

Whatsapp Messenger Facebook Twitter
ó copia el link

¿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

Visitado 147 veces | Publicado hace 6 meses

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

Ver scripts de CSS

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

Programación en CSS

Ejemplos y scripts de programación para tus proyectos

Lo último que estamos programando en el curso: Lector de Códigos QR ANDROID PHP MYSQL

Últimos detalles diseño y prueba de la app Lector Market Alis

Diseño y prueba final del Lector QR

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019