Saltar al contenido

css cómo hacer que una imagen de fondo se ajuste al ejemplo de código de pantalla

Ejemplo 1: tamaño de imagen de fondo css para ajustarse a la pantalla

html {
    height: 100%
}
body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

Ejemplo 2: establecer css de pantalla completa de imagen de fondo

#mainBackground{
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    background-image: url("https://images.unsplash.com/photo-1487058792275-0ad4aaf24ca7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
    background-size:100% 100%;
    background-repeat: no-repeat;

}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

Ejemplo 3: CSS hace que la imagen llene todo el fondo

html { 
  background: url(images/bg.jpg) no-repeat 
    center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Ejemplo 4: ¿cómo se puede establecer el ajuste completo del fondo?

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Ejemplo 5: cómo configurar una imagen de fondo de tamaño completo en html

<head>
<style>
#example1{
  border: 2px solid black;
  padding: 100px;
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="example1">
</div>
</body>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

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