How can I modify an image using stylesheet?

Bill May 7, 2010

I have three images that link to pages within my site. I believe they are being calling with the header stylesheet. I want to know where I can adjust image being used as the button and/or add a new button with a new image.

Here is the code from the header stylesheet:
; charset=” />
” />
#page { background: url(“/images/back.jpg”) repeat-y top; border: none; }
#page { background: url(“/images/back.jpg”) repeat-y top; border: none; }

  1. Bill
    May 16, 2010 at 3:08 am

    I still can't either find these images in order to change them or map the links to a new image from my library. I was looking everywhere in wordpress (the admin interface). I didn't set up the page orig so I really don't know what is housed where. If its possible to jsut change some code to point to a image in my library that would bethe easiest. Please help. You guys have been great however, im jus tnot seeing what your saying.

    • Aibek
      May 16, 2010 at 6:47 am

      Hi Bill

      The WordPress Admin doesnt give you access to your web server. You
      should contact your hosting company and ask them about FRP details for
      your server. (Also, try to login to your hosting account and see if
      there is something called File Manager there). This are the only way to
      access the directories with these images.


  2. aj
    May 11, 2010 at 2:37 am

    Hi there,

    The image is loading here .. ' '.

    • Bill
      May 11, 2010 at 2:45 pm

      Cool, now the question is how do I add new pictures to this location, via the interface. I can't get to where the above location is? What I want to do is put 3 new pictures in there and make them buttons that work the same as the 3 buttons I have working

      • Aibek
        May 12, 2010 at 7:57 am

        Bill, in order to access the above mentioned location on your web server you will need an FTP access details from your hosting provider (contact them for details). Once you have the details you may use an FTP client (ex. Filezilla) to connect to the server and replace the files.

  3. Bill
    May 11, 2010 at 12:40 am

    i guess i might not have asked the question right. :) as you can see i have 3 buttons, lighting, flooring and decor. I want to change decore and add 3 more buttons that link to different pages. I guess the part the confuses me is it looks like its images/ligthing-nav and i look at all my images and i have no phot named that

    • Aibek
      May 11, 2010 at 4:51 am

      Bill, there is a a photo named lighting-nav.jpg, it's stored in the images folder of your webserver ( you should be able to browse the contents of that folder from your hosting account or via FTP client like FileZilla.

  4. Aibek
    May 10, 2010 at 5:02 pm


    The stylesheet located at

    The part of the code that reference the images is 'url(images/lighting-nav.jpg)'

    In order to change the image you would have to copy/paste new images with the same name to the directory on your server.


  5. Bill
    May 10, 2010 at 4:24 pm

    Also the more I look at it, it looks like it's using an image image/lighting-nav.jpg. and i don;t have a n image named that. So is the image someplace else being referenced as lighting-nav

  6. Bill
    May 10, 2010 at 3:43 pm

    I really don't see this on any of the style sheets, which one should I be looking at? there are 20 of them. Also, once i do in fact find these, how woulf i add another one, i.e. a new image reference, url, etc. Because when I look athte code you attached i don't see where its referencing an image in my pictures.

    Any help here would be amazing.

  7. Aibek
    May 9, 2010 at 7:43 pm

    Hey Bill

    Looking at the page stylesheet I can see that the images you're referring to are called in the following lines in the stylesheet:

    #flooringNav {width:221px;height:242px;overflow:hidden;background: url(images/flooring-nav.jpg) no-repeat;float:left;margin-right:10px;}
    #lightingNav {width:221px;height:242px;overflow:hidden;background: url(images/lighting-nav.jpg) no-repeat;float:left;margin-right:10px;}
    #decorNav {width:221px;height:242px;overflow:hidden;background: url(images/decor-nav.jpg) no-repeat;float:left;}

    If you want to changes the images you can basically remove the old ones ad upload new ones. Though keep in mind they new ones may not blend as well as the present ones.

    Hope you found this helpful


  8. Bill
    May 8, 2010 at 1:23 pm

    Here is a link to the site. I'm referring to the Ligthing, flooring and decor buttons. The seem to be coded into the header SS

    What i need to do is adjust the image that is connected to the button and then add a button with a different photo. I see the href but nothing referring to the image. im at a lose

  9. Aibek
    May 8, 2010 at 10:14 am


    Could you give us a link to the website and tell us which images/button you're referring to.

  10. aj
    May 8, 2010 at 6:05 am

    Hi Buddy,

    It would be better if you could provide us a link to this website.


Ads by Google