Cómo hacer que la imagen de fondo en la pantalla de ajuste usando CSS?

Dado que, en el diseño de una página web a veces necesitamos una imagen de banner que encaja en la pantalla sin ningún espacio alrededor de la imagen. Y a veces necesitamos una sección que llenaba imagen de fondo sin ningún espacio alrededor de esa sección. Por lo tanto, en este vamos a aprender cómo podemos hacer que la imagen de fondo en la pantalla en forma ?

Se especifica propiedades de fondo como la URL de la imagen de fondo de la, el tamaño de la imagen de fondo, si se debe repetir o no, la posición de las imágenes de fondo también especificar fondo sin imágenes. Especificaremos como:

background-color: red;
background-size: 1000px;
background-repeat: repeat-x;
background-image: url('images/image.png');
background-position:center;

Desde proporcionando CSS en el cuerpo cubrirá todo el cuerpo del documento HTML que se va a cubrir toda pantalla de la ventana. Podemos proporcionar background-color en el cuerpo de la siguiente manera:

body{
background-color:red;
background-size:cover;
background-repeat:no-repeat;
}

Se llenará la pantalla con el rojo debido a que se aplica sobre el elemento del cuerpo background-color . Del mismo modo, si aplicamos Imagen de fondo al cuerpo que cubrirá toda la pantalla con cierto margen que será eliminado por fondo de tamaño a la cubierta.

Ajuste del propiedad background-repeat para no repetir, no se repetirá la imagen horizontalmente o verticalmente. Podemos repetir una imagen horizontalmente ajustando el background-repeat: repeat-x o repetir verticalmente ajustando el background-repeat: repeat-y

Ajuste del fondo de tamaño a la cubierta cubre todo el ancho de recipiente. Será estirar la imagen dentro de la anchura de contenedor.

Podemos establecer la imagen para encajar dentro del contenedor utilizando imagen anchura: 100% y altura: 100% . Utiliza el siguiente código:

class ejemplo:

Si queremos ajustar la imagen dentro de la div usaremos siguiente código CSS y HTML:

código HTML

<body>
<div class="bgimg">
<img src="images/landscape.jpg" class="imgstyle">
</div>
</body>

código CSS

.bgimg{
width:1000px;
height:400px;
margin:auto;
}
.imgstyle{
width:100%;
height:100%;
}

se encaja perfectamente dentro de la sección div sin ningún espacio alrededor de la div .

How to make background image fit on screen using CSS? - 4

HTML con CSS

<html>
<head>
<title>Fit image on screen</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body{
background-image:url('images/landscape.jpg');
background-size:cover;
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>


Deja un comentario

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