Fondo de DIV al 100% ancho o alto (Weight Height 100%)

Ajustar un fondo de DIV al 100% es muy sencillo. Tenemos 2 formas, agregando el "size" como 100% o (la que recomiendo) "cover".

#mi-div {
      background: url(imagen.jpg);
      background-size: 100%;
}

Ahí, nuestro código le dice que queremos un fondo al 100%, pero ¿es realmente lo que queremos? Si crees que lo que necesitas es ajustarlo para que "cubra" todo lo ancho de tu DIV, puedes usar esto:


 #mi-div {
      background: url(imagen.jpg);
      background-size: cover;
}


O si lo que quieres es ajustar tu fondo al tamaño del contenido de tu DIV, puedes usar esto:


#mi-div {
      background: url(imagen.jpg);
      background-size: contain;
}

Comentarios

Publicar un comentario

Entradas populares de este blog

Llamar a imagenes en carpetas y subcarpetas con HTML y PHP

A veces, tenemos un esquema dentro de nuestra web de ésta manera: Raiz :   - index.html   - Imagenes   - Carpeta 1        -- Subcarpeta 1             -- index.php             -- Subcarpeta 1-2   -- Carpeta 2        -- Subcarpeta 2 --- A veces, estamos editando un código en html o php, donde necesitamos insertar una imagen. En el caso que la imagen esté en la misma carpeta que el documento que estamos programando, usaremos éste codigo: <img src="imagen.jpg"> --- Si nuestra imagen está en otra carpeta, por ejemplo la imagen está en la carpeta llamada "Imagenes" y nosotros estamos trabajando en el documento "index.html" que está en la carpeta raíz, para llamar a ésta imagen usaremos el codigo : <img src="Imagenes/imagen.jpg">  Sigamos con más ejemplos, si estamos trabajando en "index.php" y queremo...
Leer más

Crear cookies con tiempo en localhost - PHP

Para crear cookies "normales", es decir, en un dominio común como .MX , .NET. , COM etc., pues la cosa es muy sencilla, setcookie("cookie", "valor o contenido", time()+60, "/", ".midominio.com"; ...pero a veces tenemos problemas para crear cookies en nuestro LOCALHOST. Algunos ponen esta solucion: setcookie("mi-cookie", "contenido", false,"/",false); Pero yo, no la recomiendo NADA! Ni siquiera se ve el tiempo que nuestra cookie vivirá, o si queremos crear un "log in" y "log out", pues tendremos que comparar el contenido, etc etc y ademas... olvidenlo, no vale la pena hablar de algo que no es recomendable. Yo recomiendo la siguiente estructura, que es la misma para un dominio normal de la web, pero especial para localhost, y es el siguiente: setcookie("cookie", "valor o contenido", time()+60, "/", $_SERVER['HTTP_HOST']); Solución Perfe...
Leer más

Configuracion basica en la estructura HTML

La estructura básica de nuestro html requiere de ciertas etiquetas, y estas etiquetas son las indicaciones que le otorgamos al navegador para una correcta visualización de nuestra web: <!Doctype html> <html> <head> <meta charset="UTF-8"> <title>Titulo</title> <link rel=stylesheet type="text/css" href="estilo.css"> <script src="script.js" language="javascript" type="text/javascript"></script> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta="robots" content="index, follow"> </head> <body> </body> </html> IMPORTANTE: Todas las etiquetas en el html se abren con un "<" y se cierran con un "</"; por ejemplo, abrimos con "<body>" y cerramos con "</body>" ...  E...
Leer más