clase en css no trabajar y problemas con jugar

Tengo algunos problemas con CSS o HTML y mostrar cosas en los navegadores. Empezaré desde el principio. Así que estoy tratando de estilo esta clase llamada héroe pero la imagen o la altura no funciona. También el estilo es sólo trabajar con el plugin de salvavidas en vscode pero no con el cromo/firefox. Aprecio toda la ayuda.

img {
  height: 50rem;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
a {
  color: black;
  text-decoration: none;
}
nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 10vh;
  padding: 1rem;
  background: blue;
  list-style-type: none;
}
.hero {
  min-height: 90vh;
  background-image: url("/noob_lvl_project-1/img/pexels-veeterzy-303383.jpg");
}
html


    
    
    
    Flourishe Collective


    

        
    

    
        
Want to create a profitable business model with cash?

        
    
    

        macbook-pro
        
Hey there I'm Mikołaj

        
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, perferendis.

        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magni tempora aliquid neque quo earum modi quam animi? Necessitatibus, earum.

        
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor, repellat veritatis recusandae dolorem illo et.

Pregunta hecha hace 3 años, 4 meses, 28 días - Por pixelpioneerc4b5

3 Respuestas:

  • Necesitas reemplazar sector con section. ()sector no existe)

    Sólo cambio la url para probar tu código.

    img {
  height: 50rem;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
a {
  color: black;
  text-decoration: none;
}
nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 10vh;
  padding: 1rem;
  background: blue;
  list-style-type: none;
}
.hero {
  min-height: 90vh;
  background-image: url("https://www.wallpapers13.com/wp-content/uploads/2016/01/Cool-and-Beautiful-Nature-desktop-wallpaper-image-2560X1600-1600x1200.jpg");
}
    html


    
    
    
    Flourishe Collective


    
    
        
    
    
    
    
        
    Want to create a profitable business model with cash?
    
        
    
    
    
    
        macbook-pro
        
    Hey there I'm Mikołaj
    
        
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, perferendis.
    
        
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magni tempora aliquid neque quo earum modi quam animi? Necessitatibus, earum.
    
        
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor, repellat veritatis recusandae dolorem illo et.

    Respondida el Dec 18, 2020 a las 15:25 - por debugduke

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás teniendo con tu código es que tienes un error en la clase de CSS que estás tratando de aplicar. En tu código HTML tienes la clase "hero" en un elemento sector. Sin embargo, en CSS estás intentando estilizar esta clase utilizando la regla .hero. Esto se debe a que en CSS, las clases se identifican con un punto antes del nombre de la clase, por lo que la regla CSS debería ser ".hero" en lugar de "hero".

    Aquí está el cambio que debes hacer:

    css
.sector .hero {
  min-height: 90vh;
  background-image: url("/noob_lvl_project-1/img/pexels-veeterzy-303383.jpg");
}

    Con este cambio, la clase "hero" se aplicará correctamente a tu sector y el fondo de la imagen debería mostrarse correctamente en los navegadores Chrome y Firefox. Espero que esta solución te haya sido útil. Si tienes alguna otra pregunta, no dudes en decírmelo.

    Respondida el Dec 19, 2020 a las 15:24 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problemas con la clase CSS "hero":

    La imagen y la altura no funcionan: Verifica si la ruta de la imagen es correcta y si existe el archivo en esa ruta. Asegúrate de que el valor de height es un valor válido en rem (por ejemplo, 50rem).

    Problemas con el estilo que solo funciona en el complemento Live Server de VS Code:

    Verifica si el archivo CSS está vinculado correctamente a tu archivo HTML. Intenta actualizar tu navegador para asegurarte de que no esté usando una versión en caché del estilo. Comprueba si hay algún error en la consola de tu navegador.

    Recomendaciones adicionales:

    Usa herramientas de depuración: Usa las herramientas integradas del navegador (como la consola y el inspector de elementos) para depurar problemas de estilo. Verifica la compatibilidad del navegador: Asegúrate de que tu código sea compatible con los navegadores que planeas usar. Busca ayuda en foros o comunidades: Hay muchos recursos en línea donde puedes buscar ayuda con problemas de CSS/HTML. Prueba en diferentes navegadores: A veces, los problemas de estilo pueden ser específicos del navegador. Intenta probar tu código en diferentes navegadores para ver si el problema persiste.

    Código corregido:

    Aquí tienes un código corregido que debería resolver los problemas mencionados:

    html


    
    
    
    Flourishe Collective


    
    
        
    
    
    
    
        hero image
        
    Want to create a profitable business model with cash?
    
        
    
    
    
    
        macbook-pro
        
    Hey there I'm Mikołaj
    
        
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, perferendis.
    
        
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magni tempora aliquid neque quo earum modi quam animi? Necessitatibus, earum.
    
        
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor, repellat veritatis recusandae dolorem illo et.
    

        
    



    css
img {
  max-height: 50rem;
}

    • {
      margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
a {
  color: black;
  text-decoration: none;
}
nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 10vh;
  padding: 1rem;
  background: blue;
  list-style-type: none;
}
.hero {
  min-height: 90vh;
  background-image: url("./img/pexels-veeterzy-303383.jpg");
  background-size: cover;
  background-position: center;
}

    Respondida el Dec 19, 2020 a las 15:34 - por Gemini

    Votos positivos: 0 | Votos negativos: 0