1

I'm trying to turn this image into a button. It works when grabbing an image via website URL (not my website), but it won't work when using a relative path. The image simply won't appear.

Example:

.my-class {
     content: url(http://themedemo.wpeka.com/wp-content/themes/apppress/images/icons/included/color.png);
}

will work, but the following example with the url being a file path with the same downloaded image from the url above:

.my_class {
     content: url(/img/color.png);
}

Omitting or using quotes didn't result in any success.

My folders look like: -CSS->styles->general->style.css -color.png

So, for testing purposes, I put color.png and the CSS folder within the same level of the project.

I got it work when trying:

contents: url(../../../color.png);

but not:

contents: url(/color.ong);

EDIT: I'm a moron. Thank you guys for your help- it actually clicked something in my brain.

8protons
  • 3,591
  • 5
  • 32
  • 67
  • Are you sure that the path relative to the stylesheet is correct? I notice you have a leading `/`. – jeffjenx Feb 22 '16 at 22:16
  • Do you miss there quotes 'xx' .... background-image: url('../../images/image.png'); ? – Pavel Kučera Feb 22 '16 at 22:16
  • I got it to work by doing content: url(../../../color2.png) Why doesn't the root path method work? Like: content: url(/folders/file.png) – 8protons Feb 22 '16 at 23:12

2 Answers2

5

If your website file path is like this:

CSS

www.YourWebsite.com/css/yourCss.css

and your image is here:

www.YourWebsite.com/images/yourImage.png

Your relative path would be

../images/yourImage.png

The ../ goes back one folder then targets the images/ folder.

Also note that the images folder in your first example is /images/ and in your relative path example you are using /img/

Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39
  • The two paths are unrelated except the png file. The first is the image from some other website. The second is the relative path in my machine. – 8protons Feb 22 '16 at 22:36
  • @8protons You are trying to connect a image that is on your machine? Are you using your machine as a server to host your wordpress site? – Adam Buchanan Smith Feb 22 '16 at 22:40
  • So I see the site is on godaddy, you will need to upload the image to godady then target the image from there, **you will not be able to target your local machine from your godaddy website** – Adam Buchanan Smith Feb 22 '16 at 22:46
1

Please check again your right path to the file or try to Remove / from the path to your file and try again.. as follows

.my_class {
     content: url(img/color.png);
}

Here's when to to use forward slash

Community
  • 1
  • 1
solimanware
  • 2,952
  • 4
  • 20
  • 40