why is the background image not showing here?

Question

okay, i have no idea why this isn't working at all. it seems like my code is the way it should be, can someone show me why my background image isn't showing correctly?

https://i.stack.imgur.com/B2wYk.jpg

body {  
     font-family:arial;
     font-size:14px;
     background-image:url('worn_dots.png');   
     background-repeat:repeat;
     }

For some reason, when I replace the URL with a web address, the background shows, but like this it doesn't.

Stop Answering!! The img url does not exist 403 forbidden error. — SVS, Jun 28 '12 at 05:14
Remove `http://i.imgur.com/RECGP.png` from your CSS defined before `body{}` — Ahsan Rathod, Jun 28 '12 at 05:22
thanks Ahsan. and thanks for the downvotes, sorry for not understanding this off the bat — king, Jun 28 '12 at 05:27
@sab according to your screen shot your css is inside in css folder, so path your image in css like this: `background-image:url(../worn_dots.png)` — Ahsan Rathod, Jun 28 '12 at 05:44
@sab The answer you just chose answers a different question, using different information than you provided; please put more care into your question before you ask. Since your new I won't flag you but please check your question before asking next time. — Hawken, Jun 28 '12 at 05:54
@sab for the sake of those who come after please add the screen-shot you posted to your question. — Hawken, Jun 28 '12 at 05:56

score 2 · Answer 1 · answered Jun 28 '12 at 05:13

2

Your Background image is forbidden see this, its working

DEMO

answered Jun 28 '12 at 05:13

Raab

34,778
4
50
65

dude what, really. damn. the way i have it right now is it's in my local directory. what would i put in for the URL if i just had the file name in my directoy, same directory as index.html (the page being edited)? for example, the file name is 'worn_dots.png', so i put it into the code URL as just 'worn_dots.png'. it is not forbidden where i am, did i put it in wrong? – king Jun 28 '12 at 05:19
1

@CoDe aDDict, The URL `http://i.imgur.com/RECGP.png` is not forbidden and also working, but He has some CSS errors. – Ahsan Rathod Jun 28 '12 at 05:25
1

@AhsanRathod by the Time I accessed it It was forbidden. I did it with same css he used, and it is just fine. see my demo – Raab Jun 28 '12 at 05:26
1

@sab! your css is just fine, you can see, I used the same css, you used. try to past your local image url in the browser and see if it is being browsed – Raab Jun 28 '12 at 05:31
yes, it worked when i opened it in the browser.. this makes no sense..... im goign to grab screen shots – king Jun 28 '12 at 05:34
http://imgur.com/V6X4u for some reason, this doesnt let me show the background... but when i replace the file name with the imgur address of the bg image.. it works.. any ideas? – king Jun 28 '12 at 05:38
1

@sab according to your screen shot your css is inside in css folder, so path your image in css like this: `background-image:url(../worn_dots.png)` – Ahsan Rathod Jun 28 '12 at 05:47
You are welcome, By the way you would never got down votes, if you describe your problem properly in your question. – Ahsan Rathod Jun 28 '12 at 05:52

score 1 · Answer 2 · answered Jun 28 '12 at 05:11

1

you should call the like mentioned below code:-

 body {  
         font-family:arial;
         font-size:14px;
         background:url('http://i.imgur.com/RECGP.png') repeat 0 0;

         }

Its working fine now check :- http://jsfiddle.net/hWvCK/2/

answered Jun 28 '12 at 05:11

Shailender Arora

7,674
2
31
35

interesting... thanks. that is really strange why the other one wasn't working. – king Jun 28 '12 at 05:14
what if i dont wnt to repeat an image? i tried to do this with only "background:url('address');" but it wasnt working. i wound up just doing the tag with html because i couldnt figure out how to make it work with html – king Jun 28 '12 at 05:15
1

@sab replace `repeat` with `no-repeat` – Hawken Jun 28 '12 at 05:20
1

yup agree with @Hawken if we dont want to repeat we can use no-repeat value – Shailender Arora Jun 28 '12 at 05:22

Hawken · Answer 3 · 2012-06-28T05:41:10.237

1

Your CSS is invalid:

https://i.stack.imgur.com/0KTLT.png

body {  
     font-family:arial;
     font-size:14px;
     background-image:url('https://i.stack.imgur.com/0KTLT.png');
     background-repeat:repeat;
     }

just remove the out of place url:

body {  
     font-family:arial;
     font-size:14px;
     background-image:url('https://i.stack.imgur.com/0KTLT.png');
     background-repeat:repeat;
     }

Also the image you are using is being blocked when requested with certain refer headers.

The image itself can be accessed fine: https://i.stack.imgur.com/0KTLT.png

On JSBin the image is not blocked: http://jsbin.com/ixibot

Yet as part of a JSFiddle page it is blocked: http://fiddle.jshell.net/hWvCK/2/show/

Seems this is not only confined to JSFiddle ( http://forumserver.twoplustwo.com/55/about-forums/imgur-being-blocked-1184548/index2.html#postcount32237568 )

edited Jun 28 '12 at 05:41

answered Jun 28 '12 at 05:13

Hawken

2,059
19
34

what did you change exactly, this looks the same – king Jun 28 '12 at 05:17
1

@sab I removed the url in the middle of your CSS. Line 2 I believe. – Hawken Jun 28 '12 at 05:19
is the bottom one the corrected version? it looks exactly the same as the one on top? – king Jun 28 '12 at 05:20
@sab yes, the top one has a URL hanging outside the CSS declaration – Hawken Jun 28 '12 at 05:22
oh i see what u did there lol. do you know how to call the file if it is a local file on your computer? i put it in the same directory as where the html file is. the file name is 'worn_dots.png' and i just put that as the URL, but it is not working. how do you call the url specifically d oyou nkow? – king Jun 28 '12 at 05:25
1

@sab if its in the same directory as the CSS just use `url('worn_dots.png')` – Hawken Jun 28 '12 at 05:26
that's what i thought, but for some reason it isn't working... does this look right? background-image:url('worn_dots.png'); isn't working i have no idea why.... that's exactly the name of the file. i replaced the file with the actual URL i posted here and it worked, but not when i tried to grab it locally. maybe it has to do with the "url" ? – king Jun 28 '12 at 05:31
1

@sab Is your CSS in a separate file? – Hawken Jun 28 '12 at 05:37
when i do it this way, the BG image doesnt show, but when i put in the URL of the imgur file, it shows up for some reason – king Jun 28 '12 at 05:44
1

@sab your url is relative to the CSS file NOT the HTML. Assumeing your CSS is at css/file.css use `url('../worn_dots.png')`. – Hawken Jun 28 '12 at 05:50

Ahsan Rathod · Accepted Answer · 2012-06-28T05:46:37.770

1

EDITED:

According to your screen shot your css is inside in css folder, so path your image in css like this:

background-image:url(../worn_dots.png)

As your image is present at root folder and css is prenst in css folder, so use ../ to relate your image in css

edited Jun 28 '12 at 05:46

answered Jun 28 '12 at 05:16

Ahsan Rathod

5,465
2
21
25

ohhh so it has to be where it is in conjuction with the CSS sheet..... wowwww gotcha makes sense – king Jun 28 '12 at 05:48

why is the background image not showing here?

4 Answers4

Linked