All images not showing up

[akosironi]

hi chris,

im currently working on a new wordpress site and have recently viewed and learned alot from your screencast’s 25-27, i was able to do my mock up pretty well, tested my images and div layouts on an htm file. css worked fine, but then when i copied and pasted my css file over to the themes folder and my images file to the wp-content/themes/…images folder all images are not showing up, i added borders around my divs to check and the borders show up meaning it reads my css file right? tried the following codes already but still no luck.

Code:

#hometopbg { border: 1px solid #FF80FF; background: #000000 url(images/hometopbg.jpg) }
#hometopbg { border: 1px solid #FF80FF; background: #000000 url(‘images/hometopbg.jpg’) }
#hometopbg { border: 1px solid #FF80FF; background: #000000 url(“images/hometopbg.jpg”) }
#hometopbg { border: 1px solid #FF80FF; background: #000000 url(/images/hometopbg.jpg) }
#hometopbg { border: 1px solid #FF80FF; background: #000000 url(‘/images/hometopbg.jpg’) }
#hometopbg { border: 1px solid #FF80FF; background: #000000 url(“/images/hometopbg.jpg”) }

what could possibly be wrong here?
btw im editing starkers theme 2.2

thanks in advance :)

[deepak.webtenet]

You are right, your html file reads the css but unable to display the images. Thats because in css, you can’t have more than one id (#hometopbg) with the same name. If you use in that case the file will read the last line i.e line marked bold.

#hometopbg { border: 1px solid #FF80FF; background: #000000 url(images/hometopbg.jpg) }
#hometopbg { border: 1px solid #FF80FF; background: #000000 url(‘images/hometopbg.jpg’) }
#hometopbg { border: 1px solid #FF80FF; background: #000000 url("images/hometopbg.jpg") }
#hometopbg { border: 1px solid #FF80FF; background: #000000 url(/images/hometopbg.jpg) }
#hometopbg { border: 1px solid #FF80FF; background: #000000 url(‘/images/hometopbg.jpg’) }
#hometopbg { border: 1px solid #FF80FF; background: #000000 url("/images/hometopbg.jpg") }

As your file reads the last line, lets get into this and remove the slash from image url. So the final line will be:
#hometopbg { border: 1px solid #FF80FF; background: #000000 url(‘images/hometopbg.jpg’) }

Test it and see the result.
Cheers!!! :)

[Author]

Posts