No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Manejo de imágenes de Background

10/26
Recursos

Aportes 44

Preguntas 7

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

me encanta como explica el profe degranda, es muy ordenado y se le entiende muy bien, haba resuelto el desafío, pero la manera en que lo hizo es mucho mas ordenado y con mas sentido, me doy cuenta que el profesor tiene muy buenas practicas.

En mi caso, al ver que utiliza muchas veces background, preferí utilizar shorthand para resumir el estilo.

Esto

background-image: url("../assets/img/Cover.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;

es lo mismo que esto

background: url(".../assets/img/Cover.png") no-repeat center/cover;

También hice una corrección para que me imagen se viera de forma completa cambiando el height de la clase home-main por:

height: calc(100vh - 140px)

Para que la imagen quede completa yo utilicé mejor un height del 100% del viewport menos el tamaño del header

.home-main{
	height: calc(100vh - 140px);
}

Yo seguí los consejos de csstricks

https://css-tricks.com/perfect-full-page-background-image/

La verdad me gustó mucho el resultado, pero se puede hacer de muchas maneras lml

Por acá les dejo un enlace a una galería con imágenes muy buenas!
También les dejo un tip: Una vez encuentran su imagen favorita en internet, le dan click izquiero y seleccionan Copiar dirección de la imagen y así, pegando la dirección en url(“dirección_imagen”) pueden usar la imagen sin necesidad de descargarla 😉

Para asegurarme de que se vea el cuello del robot yo puse que el background so posicionara en el borde de abajo:

.home__main {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    background-image: url(../assets/img/Imágenes/Cover.png);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

brutal entender bien la funcionalidad te hace ganar mucho tiempo a la hora de trabajar realizando los diseños del equipo

Diego tiene el don de explicar y llegar a la gente, en este proyecto aunque mi código es diferente hé aprendido a ver otro punto de vista, grande Diego ✅👨🏻‍💻💪🤓📈

yo agregue le background al body

    width: 100%;
    height: 100%;
    background: url('../assets/images/Cover.png') no-repeat fixed center;
    background-size: cover;

En la sección de background-img, siempre es bueno agregarle un color de fondo parecido a la imagen, de esa forma, si por algún motivo no carga la imagen, el color ayuda a que el texto que va sobre la imagen no se pierda.

Mi código es diferente pero llegué al mismo resultado

en mi caso use un codigo completamente diferente puse el background image en el > <Body>
y use la propiedad de background-position-y:85px para bajar la imagen y que empezara desde donde empieza mi contenido main.

a continuacion el resultado:

Como cada forma es distinta yo para mi background img solo le coloque un

background-image: url("likesivesesto.com");
background-size: cover;
background-repeat: repeat;

Creo que influye el tipo de img por eso le puse esas caracteristicas, que quedó perfecto, porque cambiandole los parametros mke salia cualquier cosa

background-image: url(/Blog/imagen.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;

Genial +2

Súper facil! 😀

De maravilla. 😃

Yo lo hice así:

.home-main{
    background: url('/assets/img/Cover.png') no-repeat center center fixed;
    background-size: cover;
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    height: 100%;
}```

No sé porqué al poner la imagen de fondo no se me completaba. Me tocó ponerlo así:

.home-main {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  height: 100vh;
  background-image: url('../assets/img/Cover.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Cambios en el CSS

.home-main{
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    height: 100%;
    background-image: url("../assets/img/Cover.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

De verdad que fue un problema, la imagen siempre me daba scroll, si no, aparecía cortada por la mitad.

Después de tanto logre al menos tener el resultado que esperamos.

Y es declarar en el propio “.home-main” una altura usando “calc” - restándole todo el header.

.home-main {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    width: 100%;
    height: calc(100% - 140px);
    background-image: url('./assets/img/Cover.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Las propiedades para el backgroun-size son: auto, contain y cover, las propiedades de background-repeat son: repeat, repeat-x, repeat-y, no-repeat, round.

Para poner sobre una imagen como background, solo tenemos que llamar la propiedad: brackgound-image, esa propiedad va a contener la función url(' '), en la que ponemos la dirección de nuestra imagen. Luego de eso, podemos utilizar varias propiedades del background para ajustar la imagen estéticamente: background-position, backgroun-repeat, background-size.

había resuelto el reto de otra manera pero al parecer esto de usar grids es 100% más fácil de entender, es bueno tomar otra perspectiva de como hacer las cosas

Para que sirve background cover?

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto+Slab:400,700|Roboto:400,500,700,900&amp;display=swap');

Rapidisimo 😮

Perfecto 😄 Bien explicado.

Listo 😃!!!

estupendo sigamos 😄

Recordando como acomodar imagenes en background 😃

Excelente ❤️

Gracias por recordarlo 🥳

Hecho! 😃

Muy bien seguimos avanzando en el desarrollo del proyecto.

va muy bien el proyecto, que buenos trucos los del grid, se usar css grid y no se me ocurrieron estoy mas acostumbrado a flexbox

Excelente, la explicación es súper clara. Excelente clase y excelente profesor!

Continuemos 😄

Con ayuda de lo aprendido en cursos anteriores pude tener resultados similares con menos código, espero les sirva 😉

.home-main {
    height: 100%;
    display: grid;
    place-items: center;
    background: url('../assets/imgs/principal-cover.png') center/cover no-repeat;
}

8. Manejo de imágenes de Background:

En esta clase agregamos estas reglas a nuestra clase home-main:

Código CSS

.home-main {
    background-image: url('../assets/img/cover.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.home-main {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  height: 100%;
  background-image: url("../assets/img/Cover12.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}```

Algún día quiero ser como el profe. :’)

Yo lo había hecho así:

.main {
    width: 100%;
    height: 100%;
    background-image: url('/assets/cover.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}```

n