Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Background image not loading

I have followed all of the tutorials, which all say the say thing. I specify my background inside of body in my css style sheet, but the page just displays a blank white background. Image is in the same directory as the .html and the .css pages. The tutorial says that

<body background="image.jpeg"> 

is deprecated, so I use, in css,

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

no success. Here is the entire css style sheet:

body  { background-image: url('nickcage.jpg'); padding-left: 11em; padding-right: 20em; font-family: Georgia, "Times New Roman", Times, serif;  color: red;         } 
like image 775
jaredad7 Avatar asked Jan 27 '14 06:01

jaredad7


People also ask

Why does my CSS background image not showing up?

Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.

Why is my background image not showing HTML?

Make Sure Your CSS File Is Properly Embedded in Your HTML File. The CSS file must be linked to the HTML file for the background images to be displayed or loaded correctly on the website. Furthermore, you must include the link tag in the HTML file to fix a problem such as a background-image URL not working.

Why is my Div background image not showing?

you have to change your path background-image: url('/ximages/websiteheader1. png') ; TO background-image: url('ximages/websiteheader1. png') ; actually, remove the first / from the path of the image.


2 Answers

First of all, wave bye-bye to those quotes:

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

Next, if your html, css and image are all in the same directory then removing the quotes should fix it. If, however, your css or image are in subdirectories of where your html lives, you'll want to make sure you correctly path to the image:

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 

Hope it helps.

like image 53
Frankenscarf Avatar answered Sep 19 '22 12:09

Frankenscarf


I had the same issue. The problem ended up being the path to the image file. Make sure the image path is relative to the location of the CSS file instead of the HTML.

like image 20
Timothy Carr Avatar answered Sep 18 '22 12:09

Timothy Carr