Load Images from theme folder with CSS

[Haste]

Hi,

I tried several options to load my images from my theme folder which is: wp-content/themes/domainname/images through CSS.

Example: background: url(‘images/clickhere.jpg’) no-repeat; Doesn’t work because it lead to –> wp-content/themes/domainname/css/images/clickhere.jpg.

Am I missing something or totally doing it wrong ?

Thanks !

[Paulie_D]

Unless your HTML pages are in the same parent directory (in this case, it would seem to be the CSS folder this

url(‘images/clickhere.jpg’) 

wont work.

I would suggest something like

url(.../css/images/clickhere.jpg’) 

but you may have to go further up the domain ‘tree’ or even switch paths completely.

TBH, I would have though this would be a setting in WP

[Haste]

Problem is the first code u provided sends me straight away in the CSS folder. And the second I don’t want to be in the CSS folder at all because that’s not where my image folder is ;)

This is what I want to reach.
wp-content/themes/domainname/images/

[chrisburton]

Where is your CSS folder and where is your images folder in relation to the wp-content folder?

Might be helpful if you can post a screenshot.

[Haste]

Screenshot..

1st time here so I was looking for a way to upload images :p

[chrisburton]

Okay, so in your CSS for the background, you would do something like this:

background: url('.../images/image.jpg’);

[Haste]

Leads to:

http://www.websitename.com/wp-content/themes/websitename/css/.../images/clickhere.jpg

[chrisburton]

@Haste Did you actually test it? Use an image you already have and replace the filename.

Would be great to see a live link.

[mcjohnst]

../images/myfile.ext should work. Assuming your styles aren’t burried in another sub-directory of /css/

[Senff]

If your CSS is in a file in the CSS folder, this should just work:

background: url("../images/clickhere.jpg") 

However, if your CSS code is in styles.css (the one that’s not in the CSS folder but in the root of the theme), this should work:

background: url("images/clickhere.jpg") 

Maybe some of the previous replies were a bit messed up due to the apostrophe? Not sure why three dots would be used (@Chrisburton ?), just two would be enough to go up one directory.

[Haste]

Thanks Senff that worked ! :)

Is it possible to ask 1 more WordPress question? If not disregard it ;)

In my page or post I’m using the text editor and using the img tag for putting images in my page. However i’ve searched how to properly use it and came across this:

<img src="/images/featured.png"/>

However this is for a template and not just a page html editor.

I don’t want the full url to be shown.

[Soren]

Where do you not want the image url shown?

[Senff]

If you want to add an image URL in your template, you could use something like this:

<img src="<?php bloginfo('template_url'); ?>/images/blabla.gif">

Which will be translated into something like:

<img src="//www.yoursite.com/wp-content/themes/yourcurrenttheme/images/blabla.gif">

That what you mean?

[Soren]

Yeah kind of. I was just wondering if you meant you don’t want people to see the full image path if, for example, they “View Page Source”.

[chrisburton]

Oops. I had an extra period in my answer.

[Author]

Posts