Hay una diferencia entre añadir una imagen de fondo y añadir una textura. Normalmente para las texturas utilizamos la propiedad repeat para que la imagen se repita y ocupe todo el fondo.
En una plantilla de Blogger la imagen de fondo la añadiríamos de la siguiente forma.body {
background: url('url-imagen-fondo');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Cuando hacemos eso conseguimos que la imagen se repita a lo largo y ancho del blog.
Veamos un ejemplo, añadimos la siguiente imagen que mide 250px × 229px
background: url('url-de-la-imagen');
Por defecto la imagen se repite, y nos proporciona el mismo efecto que si añadiéramos la propiedad repeat.
background: url('url-de-la-imagen')repeat;
La propiedad background-repeat determina como se repite una imagen de fondo.Si utilizamos no-repeat nuestra imagen no se repetirá y por defecto aparecería en el margen superior izquierdo.
background: url('url-de-la-imagen') no-repeat;
Hay otros valores que podemos añadir para decidir de qué forma repetir la imagen.
Si con repeat la imagen se repite horizontal y verticalmente con repeat-x conseguimos que se repita en horizontal.
background: url('url-de-la-imagen')repeat-x;
Por el contrario se repetirá en vertical si utilizamos repeat-y
background: url('url-de-la-imagen') repeat-y;
Como decía antes no se añade igual una textura que una imagen, antes de añadir una imagen de fondo deberíamos saber que la imagen no se posiciona en el centro sino que somos nosotros los que debemos añadir la posición de la imagen. Para posicionar una imagen utilizamos la propiedad background-position.
Se utilizan los valores top (arriba) left (izquierda) right (derecha) bottom (abajo) y center (centrado)
Posiciones horizontales: (left, center, right)
Posiciones horizontales verticales (top, center, bottom)
Partiendo de esa base aquí tenemos unos ejemplos.
¿Todavía nada en claro? quizás con este ejemplo veamos mejor como posicionar una imagen tipo fotografía.
Si nuestra imagen es grande puede que no tengamos problema, pero si por el contrario es menor que el espacio de nuestro blog se vería más o menos así:
background: url('url de la imagen') no-repeat center;
Hay una solución y es aumentar la imagen de tamaño, pero con seguridad que la imagen perdería calidad, podemos probar si así lo deseamos o.. recurrir a otra solución. Añadir color a ese espacio que no es ocupado por la imagen.
background:#000 url('url de la imagen') no-repeat center;
La solución es sencilla veremos la imagen centrada, y ese espacio que no ocupa será ocupado por un color.
0 comentarios:
Publicar un comentario