1

I have a simple project which has a product page. A splash (full width, fixed height div) will display a background-image which will change depending on the department.

I created the splash <div> using the following CSS class in my custom.css file.

.page-splash {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
padding: 180px 50px;
height:600px; 
}

I have then moved a step further to create a separate class for each of the background images I would like to use.

.splash-chocolate {
background-image: url("abc.jpg");
}
.splash-vegetables {
background-image: url("123.jpg");
}

I call the classess in my html file as shown in the next piece of code below and this is where the fault begins. It causes my page to crash when loading.

Have I taken the wrong approach? or have I made a syntax error that I have overlooked? (image file / department names e.g chocolate have been simplified for the question).

<div class="page-splash splash-chocolate"></div>

All help greatly appreciated as always!

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Nathwales
  • 118
  • 1
  • 12
  • 3
    " It causes my page to crash when loading." any error message or something ? – Benjamin Poignant Feb 26 '16 at 18:09
  • No error message @BenjaminPoignant it firefox just keeps spinning like its trying to continue loading but the images dont show. I have removed the code and tried doing it all in one class and that works so I am guessing the fault comes when I try to nest the two classess together? – Nathwales Feb 26 '16 at 18:11
  • Are you sure that the path of the images are correct. – Lal Feb 26 '16 at 18:14
  • 1
    your url path to the image will produce: site.com/abc.jpg. where are you storing your images in the project? Provided that you have a project structure like so: project/images/abc.jpg, the url in css should be url("/images/abc.jpg") – Ben Sewards Feb 26 '16 at 18:19
  • The simplest way to diagnose the problem would probably be to look in the console. Right click anyway, choose 'Inspect element' and click the console tab. If the image paths are wrong, there will be a message in there saying that. – jameson Feb 26 '16 at 18:21
  • 1
    Can't see any problem: https://jsfiddle.net/8mLyrk01/ @Lal: What should reversing the order change? – Linus Caldwell Feb 26 '16 at 18:22
  • @BenSewards: To be exact: With the given code the image will be searched within the same directory the css file is located in, not necessarily the root. – Linus Caldwell Feb 26 '16 at 18:35

1 Answers1

-1

Edit - thanks to linus for correction:

Check to make sure you have the correct url path to the image. It could be trying to pull the image but is unable to find it

CSS background-image property not loading

If your css classes are in separate folders, you may need to specify in your url property the path to the correct folder.

Community
  • 1
  • 1
jerellm
  • 54
  • 4
  • Which property? If you mean `background-size`: even then the image should be displayed (although with wrong size) because it would just be ignored. – Linus Caldwell Feb 26 '16 at 18:30
  • Sorry, I meant background-image. At w3schools it says that IE12 is fully supported for that propery – jerellm Feb 26 '16 at 19:54
  • 1
    Besides w3schools beeing a bad reference, you may have misread the table. It says Edge 12 has full support, and IE since version 4. Actually that's not really true because for instance gradients are not supported in IE4, but using `background-image` for images is very basic. It's very unlike there is a browser problem, but a wrong path like you point out too. – Linus Caldwell Feb 26 '16 at 20:04