La imagen de fondo HTML y CSS no se muestra

Ya he comprobado dos veces mi URL y el nombre de los archivos, pero parece que la imagen no se muestra. ¿Por qué es así? Aquí está mi código (tome nota que el <p> está dentro de las etiquetas corporales, no agregué el código completo, solo agregué el encabezado y el problema específico).La imagen de fondo HTML y CSS no se muestra

<html> 
    <head> 
    <title>Head First Lounge.</title> 
     <link type="text/css" 
      rel="stylesheet" 
      href="stylesheet/style.css" 
      media="screen"/> 
    </head> 


<p class = "guarantee"> 
    Our guarantee: at the lounge, we're committed to providing you, 
    our guest, with an exceptional experience every time you visit. 
    Whether you're just stopping by to check in on email over an 
    elixir, or are here for an out-of-the-ordinary dinner, you'll 
    find our knowledgeable service staff pay attention to every detail. 
    If you're not fully satisfied, have a Blueberry Bliss Elixir on us. 
</p>

Y aquí es la regla CSS para esa parte

.guarantee{   
     background-image: url(images/background.gif); 
     font-family: "Geogia", "Times New Roman", Times, serif; 
     border-color: black; 
     border-width: 1px; 
     border-style: solid; 
     background-color: #a7cece; 
      padding: 25px; 
      margin: 30px; 
      line-height: 1.9em; 
      font-style: italic; 
      color: #444; 
}

Fuente

2012-01-12 user962206

¿Cuál es la url de la imagen? /images/background.gif o /stylesheet/images/background.gif – KingCronus

se encuentra image/background.gif. esa es la página HTML principal. – user962206

cambiar 'background-image: url (../ images/background.gif)' –

Prueba esto:

background-image: url(../images/background.gif);

Sin la ../ está buscando una carpeta de imágenes dentro de la carpeta de estilos, que no existe . Por lo tanto, debe volver al directorio donde se encuentra la carpeta de imágenes.

Editar: También puede acortar hasta sus estilos CSS de este modo:

.guarantee{ 
    background: #a7cece url(../images/background.gif); 
    border: 1px solid black; 
}

Fuente

2012-01-12 16:52:34 Drew

En otras palabras: el contenido externo en las hojas de estilo está relacionado con la ruta de acceso de la hoja de estilos. Si la hoja de estilo está en 'stylesheet/style.css', entonces' images/bg.gif' se resolverá en 'stylesheey/images/bg.gif'. –

Caray, finalmente lo tengo funcionando. En realidad, nunca me di cuenta de que estaba en una ruta diferente y la carpeta de imágenes no es la misma que la página principal, gracias también por agregar algunos consejos útiles. Soy nuevo en CSS, programación web específicamente. Gracias Drew! – user962206

¡Publicación muy útil! – nckbrz

El navegador será la búsqueda de la imagen dentro de su directorio de hoja de estilo en este momento.

podría valer la pena intentar cambiar

background-image: url(images/background.gif);

background-image: url(/images/background.gif);

que podría ser la causa del problema.

Fuente

2012-01-12 16:53:11 KingCronus

-1

Puede ser que haya utilizado barras diagonales inversas (\) en lugar de barras diagonales (/) en la ruta de la imagen.

Cometí este error y estaba peleando con mi navegador Chrome. Copié la ruta de la imagen desde el Explorador de Windows (que utiliza barras inclinadas)

Fuente

2014-10-02 17:21:31

que estaba teniendo este mismo problema lo resolvió mediante la adición de/para el comienzo de la URL de la imagen

(ejemplo: Imagen de fondo: url (/ images/background.gif);)

Espero que esto ayude :)

Fuente

2015-08-11 14:07:52 Seth

sé que esta respuesta es un poco tarde, pero este enlace le dará una explicación detallada de las rutas de archivos CSS.

/ returns to the root directory 
../ moves one directory backwards 
../../ moves two directory backwards

https://css-tricks.com/quick-reminder-about-file-paths/

Fuente

2016-02-13 18:30:43

La imagen de fondo HTML y CSS no se muestra

Respuesta

Cuestiones relacionadas