Cómo establecer la imagen de fondo perfecto con CSS?

En este artículo, vamos a aprender cómo crear y establecer un fondo de imagen perfecta con CSS dentro de un elemento ?

Mientras CSS está bastante avanzada, pero los nuevos diseñadores a menudo se encuentran atrapados cuando las cosas no salen como quieren en el CSS. imagen de fondo y el establecimiento de posicionamiento es uno de esos problemas desagradables que los nuevos diseñadores de evitar el uso en sus páginas web, por desgracia faltan las capacidades de CSS que pueden producir efectos maravillosos.

CSS tiene propiedades muy interesantes fondo. Ajuste de color y gradientes en CSS son juego de niños. Si usted no ha leído el (cómo crear gradientes con CSS3?), No comprobarlo. Con Imagen de fondo y fondo de tamaño , podemos dar ningún elemento de un fondo de imagen perfecta, que no se ve estirado para caber en el elemento.

vamos a entender esto en la práctica,

HTML con CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS perfect image demo</title>
<style>
.box {
width: 300px;
height: 300px;
background-image: url('http://jgospel.net/media/93206/.108503.bt.jpg');
background-size: cover;
background-position: center center;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

salida

How to set perfect image background with CSS? - 4

Comenzando con el HTML, tenemos un elemento div con caja class que utilizaremos para seleccionar el elemento en el CSS.

El venir a CSS, hemos seleccionado el .box div elemento y asignar el ancho y la altura al elemento de caja, de modo que pueda hacer en el navegador. A continuación, se establece una imagen de fondo usando Imagen de fondo propiedad y dándole la URL de la imagen. A continuación, añadir fondo, tamaño de la propiedad y establezca su valor a cubierta , lo que significa que la imagen va a cubrir el fondo totalmente sin estirar.

Pero esto hace que nuestra imagen de fondo para mostrar desde la esquina superior izquierda. Debido a que la mayoría de las imágenes tienen un contenido class en el centro, que utilice background-position a la posición al centro. El primer centro es centrar horizontalmente la imagen y otro centro es centrar verticalmente la imagen.

y ahí lo tienes, imagen de fondo perfecto class un elemento .

DEMO


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *