0

Hi i am trying to load image from my system using css but localhost says "The requested resource () is not available". If i use the image link from other sites it's working.

(I am using css from css folder)

My code is:

Html:

 <div id="trans">
 Some text
 </div>

css:

#trans {
     width: 180px;
     height: 180px;
     display: block;
     position: relative;
     border: 1px solid #000;
     margin: 20px auto;
     padding: 10px;
       }

#trans:after {
     background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);/*If i am using local host path image is not loading*/
     opacity: 0.25;
     width: 200px;
     height: 200px;
     top: 0;
     left: 0;
     position: absolute;
     z-index: -1;
     content: "";
     }

image path in my system : C:\Users\some\Documents\NetBeansProjects\someone\web\images\trans.jpg

kiran lanke
  • 92
  • 1
  • 3
  • 12

1 Answers1

3

Your image path needs to be relative to the localhost, or the page you're currently on. I'm guessing it will be something like url(/images/trans.jpg) or url(../images/trans.jpg). Web browsers are not permitted to directly access the file system.

aaronburrows
  • 994
  • 4
  • 16
  • Your CSS is stored in a folder above the index executing it. So you need to backup to that dir, to get to `images` so that's why you need the `../`. A full URI should work just fine, however not when the content is SSL. – WASasquatch Apr 17 '14 at 21:05
  • You can use protocol-less URI's. Provided the server hosting the files supports https, you can get away with `//domain.com/full-path.jpg` to avoid secure/nonsecure conflicts. See [this SO question](http://stackoverflow.com/questions/12069156/protocol-less-urls) for more details. (The question was closed, but the information is useful.) – aaronburrows Apr 21 '14 at 15:33