cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Background image not displaying

I'm sure I'm doing something wrong (I'm knew to this). But, I can't get my background image to display. I'm using cPanel to host.

 

Under public_html I've got all of my files, including my "images" folder hosting the assets. The image I'd like to use is called "full-background.png"

 

For my main css, I have written:


header {
height: 800px;
background: url('images/full-background.png');
background-size: cover;
}

 

Any ideas?

7 REPLIES 7
Anonymous
Not applicable

Re: Background image not displaying

Hi @kktotheing,

get rid of the single quotation marks around the background URL ,and putting the image file in the same directory so you don't have to include the path may help too.

 

Regards

Re: Background image not displaying

try:

 body{

background: image('images/full-background.png');

}

 

Re: Background image not displaying

Thank you both. For some reason it still doesn't work. The rest of my images all work just fine. Not sure why this specific one won't load as a background.

Re: Background image not displaying

Hi,

 

I'm having the exact same problem.  Have you figured this out?

 

Thanks!

Re: Background image not displaying

Hi,

 

I'm also new to this - and was having the exact same problem. What finally worked for me was making a copy of the folder that contained my background image (folder called images) and placing it one level up in the public_html folder. 

 

Hope this works for you as well.

Re: Background image not displaying

I had the same issue until I added "-image" after "background":

 

example:  background-image: url(images/Luxury_noblack.png);

 

Important: I was typing it in exactly as noted above, BUT, it wasn't working because I did not have it placed in the proper order in my code... initially, I had it within <body> and THAT DID NOT WORK.  (maybe you already knew that, but this is my FIRST DAY every coding or building a site with code, so I was at it for hours, until I figured it out.  Here is what the beginning of my code looks like (in my case):

 

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Coming Soon</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">body {


background-image: url(images/Luxury_noblack.png);
}

 

I truly hope this helps everyone who is having this issue.  (Jan 30, 2018). 

Re: Background image not displaying