Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › Back End › Load Images from theme folder with CSS

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
1 2
  • Author
    Posts
  • January 31, 2014 at 2:26 am #161493
    Haste
    Participant

    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 !

    January 31, 2014 at 4:24 am #161505
    Paulie_D
    Member

    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

    January 31, 2014 at 7:07 am #161518
    Haste
    Participant

    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/

    January 31, 2014 at 7:16 am #161519
    chrisburton
    Participant

    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.

    January 31, 2014 at 8:00 am #161527
    Haste
    Participant

    Screenshot..

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

    January 31, 2014 at 8:07 am #161529
    chrisburton
    Participant

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

    background: url('.../images/image.jpg’);
    January 31, 2014 at 9:05 am #161539
    Haste
    Participant

    Leads to:

    http://www.websitename.com/wp-content/themes/websitename/css/.../images/clickhere.jpg
    January 31, 2014 at 9:14 am #161540
    chrisburton
    Participant

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

    Would be great to see a live link.

    January 31, 2014 at 11:43 am #161557
    mcjohnst
    Participant

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

    February 1, 2014 at 7:06 pm #161650
    Senff
    Participant

    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.

    February 6, 2014 at 3:31 am #162010
    Haste
    Participant

    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.

    February 6, 2014 at 10:02 am #162052
    Soren
    Participant

    Where do you not want the image url shown?

    February 6, 2014 at 10:15 am #162054
    Senff
    Participant

    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?

    February 6, 2014 at 10:26 am #162055
    Soren
    Participant

    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”.

    February 6, 2014 at 11:18 am #162060
    chrisburton
    Participant

    Oops. I had an extra period in my answer.

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 16 total)
1 2
  • The forum ‘Back End’ is closed to new topics and replies.