Background image not visible in the browser

Question

I created a simple aspx page and I assigned the background image for my page using css as below:

html {
    background: url(Images/backImage.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

The styles are in the style tag with the aspx page itself. I can see the image in the designer, but when I open the page in browser, I am not able to view the image. It happens in all the browsers I tried. What am I missing here?

I suspect the capital I on "Images" might be throwing it off. — Grim..., Aug 15 '13 at 19:29
I have an error as: Resource interpreted as Image but transferred with MIME type text/html in my Network and console tabs — PushCode, Aug 15 '13 at 19:38

score 1 · Answer 1 · answered Aug 15 '13 at 19:27

1

edit: You need quotes

background: url("Images/backImage.jpg")

Also try Fully qualifying your url to the image.

answered Aug 15 '13 at 19:27

Automate This

30,726
11
60
82

1

You only *need* quotes if you have unescaped special characters: http://stackoverflow.com/questions/2168855/css-url-are-quotes-needed – Grim... Aug 15 '13 at 19:30
No worries. Always adding quotes isn't a bad habit to get into. – Grim... Aug 15 '13 at 19:35
@Grim I tried your options. I still can't see the image in browser. I have this error in my browser console: Resource interpreted as Image but transferred with MIME type text/html – PushCode Aug 15 '13 at 19:39

score 0 · Answer 2 · answered Aug 15 '13 at 19:36

0

If you are in a Linux environment your directory file name need to be case sensitive.

If your image directory on your server is "images" then "Images" wont work. I have pulled my hair out on that one a few times.

answered Aug 15 '13 at 19:36

Travis

2,185
7
27
42

I am on windows and I tried renaming my Images folder to images – PushCode Aug 15 '13 at 19:41

PushCode · Accepted Answer · 2013-08-15T19:56:55.053

I found it. Its not actually related to css. I am using forms authentication in my web application I have set protection to all my resources as:

<forms name=".ASPXFORMSDEMO" loginUrl="logon.aspx" protection="All" path="/" timeout="30" />

I realised that I need allow unauthenticated users to access images folder and added the following in my web.config after the system.web tag:

<location path="images">
<system.web>
  <authorization>
    <allow users ="*" />
  </authorization>
</system.web>

Thank you all for your quick replies and I am sorry for missing out the details in my actual question. I didn't really thought it was related to authentication.

Background image not visible in the browser

3 Answers3