Imagen de fondo de CSS sin cargar

He seguido todos los tutoriales, que dicen todo lo que dicen. Especifico mi fondo dentro del cuerpo en mi hoja de estilo CSS, pero la página solo muestra un fondo blanco en blanco. La imagen está en el mismo directorio que las páginas .html y .css. El tutorial dice que

 

está en desuso, entonces uso, en css,

 body {background: url('image.jpeg');} 

sin éxito. Aquí está toda la hoja de estilo css:

 body { background-image: url('nickcage.jpg'); padding-left: 11em; padding-right: 20em; font-family: Georgia, "Times New Roman", Times, serif; color: red; } 

aquí hay otro resultado de la imagen de la url … que funciona bien … solo pongo solo una ruta de la imagen … compruebalo …

Fiddel: http://jsfiddle.net/287Kw/

 body { background-image: url('http://sofes.miximages.com/background/bird4.jpg'); padding-left: 11em; padding-right: 20em; font-family: Georgia, "Times New Roman", Times, serif; color: red; } 

En primer lugar, despídase de esas citas:

 background-image: url(nickcage.jpg); // No quotes around the file name 

Luego, si su html, css e imagen están todos en el mismo directorio, entonces eliminar las comillas debería solucionarlo. Sin embargo, si su css o imagen están en subdirectorios de donde vive su html, querrá asegurarse de que vaya correctamente a la imagen:

 background-image: url(../images/nickcage.jpg); // css and image live in subdorectories background-image: url(images/nickcage.jpg); // css lives with html but images is a subdirectory 

Espero eso ayude.

Tuve el mismo problema. El problema terminó siendo la ruta al archivo de imagen. Asegúrese de que la ruta de la imagen sea relativa a la ubicación del archivo CSS en lugar del HTML.

prueba esto

 background-image: url("/yourimagefolder/yourimage.jpg"); 

Tuve el mismo problema cuando utilicé background-image: url("yourimagefolder/yourimage.jpg");

Observe la barra que marcó la diferencia. El nivel de la carpeta fue la razón por la que no pude cargar la imagen. Supongo que también te encontraste con el mismo problema

para mí, la línea siguiente funciona para mí, la puse en el css de mi cuerpo (donde la imagen está en la misma carpeta en la que están mis archivos css y .html):

 background: url('test.jpg'); 

Otra cosa que debes preocuparte es, ten cuidado con la extensión de la imagen, asegúrate de que tu imagen tenga la extensión .jpeg o .jpg. Gracias

Tuve el mismo problema. Si tiene sus imágenes en carpetas, intente esto

 background-image: url(/resources/img/hero.jpg); 

No olvides poner la barra invertida frente a la primera carpeta.

Encontré que el problema era que no se podía usar una URL corta para la imagen “img / image.jpg”

debería usar la URL completa ” http://sofes.miximages.com/background/image.jpg “, ¡pero no sé por qué!

Cambié la raíz del documento para mi servidor web apache instalado en el servidor wamp. así que usar la URL relativa ie (images / img.png) no funcionó. Tuve que usar la URL absoluta para que funcione, es decir,

background-image: url (” http: //localhost/project_x/images/img.png “);

el siguiente código funcionó para mí donde había colocado la imagen en alguna carpeta / assets / img / background_some_img.jpg

 background-image: url('../img/background_some_img.jpg'); background-size: cover; background-repeat: no-repeat; 

Si coloca la imagen y la carpeta css dentro de un directorio padre, suponga que hay activos, entonces el siguiente código funciona perfectamente. Cualquiera de las comillas dobles o sin una comilla doble funcionan bien.

 body{ background: url("../image/bg.jpg"); } 

La ruta a la imagen debe ser relativa, es decir, si el archivo css está en la carpeta css, entonces debe iniciar la ruta con ../ , como

 body{ background-image: url(../images/logo.jpg); } 

Me gustaría compartir mi proceso de depuración porque estuve atascado en este tema durante al menos una hora. No se pudo encontrar la imagen cuando se ejecuta el host local. Para agregar algo de contexto, estoy diseñando dentro de una aplicación de Rails en el siguiente directorio:

 apps/assets/stylesheets/main.scss 

Quería renderizar la imagen de fondo en la etiqueta del encabezado. La siguiente fue mi implementación original.

 header { text-align: center; background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece), url('../images/header.jpg') no-repeat; background-blend-mode: multiply; background-size: cover; } 

… Como resultado, recibí el siguiente error en el servidor de Rails y la consola en las herramientas de desarrollo de Chrome, respectivamente:

 ActionController::RoutingError (No route matches [GET] "/images/header.jpg") GET http://localhost:3000/images/header.jpg 404 (Not Found) 

Intenté diferentes variaciones de la url:

 url('../images/header.jpg') # DID NOT WORK url('/../images/header.jpg') # DID NOT WORK url('./../images/header.jpg') # DID NOT WORK 

y todavía no funcionó. En ese momento, estaba muy confundido … decidí mover la carpeta de imágenes del directorio de activos (que es el valor predeterminado) a dentro del directorio de hojas de estilo, y probé las siguientes variaciones de la url:

 url('/images/header.jpg') # DID NOT WORK url('./images/header.jpg') # WORKED url('images/header.jpg') # WORKED 

Ya no recibí el error del servidor de la consola y los Rails. Pero la imagen todavía no se mostraba por alguna razón. Después de darme por vencida temporalmente, descubrí que la solución era agregar una propiedad de altura para que se mostrara la imagen …

 header { text-align: center; height: 390px; background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece), url('images/header.jpg') no-repeat; background-blend-mode: multiply; background-size: cover; } 

Desafortunadamente, todavía no estoy seguro de por qué los 3 bashs de URL iniciales con “../images/header.jpg” no funcionaron en el host local, o cuando debería o no debería agregar un punto al comienzo de la url.

Puede tener algo que ver con la configuración de la etiqueta de enlace predeterminada en application.html.erb, o tal vez es una cosa .scss vs .css. O tal vez así es como funciona la propiedad de fondo con url () (la imagen debe estar dentro del mismo directorio que el archivo css). De todos modos, así es como resolví el problema con la imagen de fondo de CSS que no se cargaba en el localhost.

puedo traer un poco de ayuda aquí … parece que cuando usas say background-image: url (“/ images / image.jpg”); o background-image: url (“images / image.jpg”); o background-image: url (“../ images / image.jpg”); diferentes navegadores parecen ver esto de manera diferente. el primero, el navegador parece ver esto como domain.com/images/image.jpg …. el segundo que ve el navegador en domain.com/css/images/image.jpg …. y el final el navegador lo ve como domain.com/PathToImageFile/image.jpg … espera que esto ayude

Tuve el mismo problema y después de leer esto encontré el problema, fue el corte. Ruta de Windows: images \ green_cup.png

CSS que funcionó: images / green_cup.png

images \ green_cup.png no funciona.

Phil