Title: Inserting an image using css
Last modified: August 18, 2016

---

# Inserting an image using css

 *  [shadow](https://wordpress.org/support/users/shadow/)
 * (@shadow)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/)
 * Hi,
    Site: Organic Shadows @ [http://www.os42.com](http://www.os42.com) I have
   some images in my menu and would like to put them in place using css rather than
   within my index.php I need to be able to do this so that for different styles
   different images can be shown, whereas under my present method, the same image
   is locked into every style. I know it is possible but I am not sure how it is
   done. Could anyone point me in the right direction as to how to make this happen?
   Your help would be much appreciated. Thanks 🙂

Viewing 13 replies - 1 through 13 (of 13 total)

 *  [markmichon](https://wordpress.org/support/users/markmichon/)
 * (@markmichon)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74679)
 * #div {
    background-image: url(whatever); }
 *  Thread Starter [shadow](https://wordpress.org/support/users/shadow/)
 * (@shadow)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74681)
 * Thanks for the suggestion Mark, but I am not sure I understand it.
    I need to
   place 5 separate images in my menu but on top of that I am trying to place 5 ‘
   different’ images in each style. I hope this makes sense. It’s driving me crazy.
   There must be a way to do this.
 *  [markmichon](https://wordpress.org/support/users/markmichon/)
 * (@markmichon)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74682)
 * Take a look at my site(click name) and down at the very bottom I have the validated
   buttons and such. Those are done all in CSS, is that kinda what you mean?
 *  Thread Starter [shadow](https://wordpress.org/support/users/shadow/)
 * (@shadow)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74683)
 * Well not really Mark.
    On my site I have 5 images which are similar in style 
   to my header. At the moment they are placed within my index.php This all works
   fine but I am trying to make some other styles. The problem is that these images
   do not match those needed in my new styles, so I would like to use css to allow
   for these 5 different images. Thanks for your help 🙂
 *  Thread Starter [shadow](https://wordpress.org/support/users/shadow/)
 * (@shadow)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74686)
 * Thanks Mark,
    I can see that what you mean is right. Unfortunately, something
   is not working though. I have this in my index.php
    -  <div>
       <div id="image1"></div> </div>
    - 
       and then in my css I have this… `#image1{ background: url(block1.jpg) no-
      repeat center; } block1.jpg is located in the same directory as my css file
      So, from what I see, it should work…and yet the reality is – it doesn’t… Am
      I making any obvious errors here? Thanks again 🙂
 *  [TechGnome](https://wordpress.org/support/users/techgnome/)
 * (@techgnome)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74695)
 * Shadow – it working, but the Div tag is empty, so it may simply not be big enough.
   In the CSS try setting the height and width to the size you want it to be. The
   image should then show.
    Tg
 *  Thread Starter [shadow](https://wordpress.org/support/users/shadow/)
 * (@shadow)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74730)
 * Tried that – still no go. I think it is in the css. The li is showing up because
   it is direct from the index
    It’s getting the css to work with it that is causing
   me hassles… Thanks for your suggestions – I will keep persevering.
 *  [Mark (podz)](https://wordpress.org/support/users/podz/)
 * (@podz)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74751)
 * Shadow – this works…. but it’s ugly 🙂
    I took the image code from the Crayon
   experiment: #image1 { background-image: url(‘[http://www.mfr.f2s.com/1css/wp-content/menu3.gif&#8217](http://www.mfr.f2s.com/1css/wp-content/menu3.gif&#8217););
   border-top: solid 4px #cc9900; border-left: solid 4px #cc99ff; border-right: 
   solid 4px #cc9900; border-bottom: solid 4px #cc99ff; } Because there are borders
   specified, only they appear if I just used <div id=”image1″></div> If I put some
   nonbreakspaces in though, the image will turn up: <div id=”image1″> `&nbsp;` `&
   nbsp;` `&nbsp;` `&nbsp;` </div> Not pretty at all, but at least once you can 
   see the image, you can start adding any padding ? I guess the much better way
   to do this is through positioning, but I’m still learning that 🙂
 *  Thread Starter [shadow](https://wordpress.org/support/users/shadow/)
 * (@shadow)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74814)
 * Thanks TechGnome and Podz,
    Tried each of those suggestions. No difference on
   suggestion from TG but the suggestion from Podz did show the image. Unfortunately
   it also showed ‘nbsp’ over the top of the image for every line where it was placed.
   I am at a bit of a loss as to where to head now. I was really hoping to make 
   some new styles but do not want to take the images out on my default because 
   I really like them as they are. I could try and use the same set of images in
   every style but it defeats the purpose of what I am trying to accomplish. Anyway,
   thanks for all your help and suggestions. If I ever get it worked out I will 
   let you know how it is done 🙂
 *  Thread Starter [shadow](https://wordpress.org/support/users/shadow/)
 * (@shadow)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74823)
 * Hi Podz 🙂
    It’s sitting there now and showing the code over the image. Sorry–
   I just arrived home after a braindraining day – do you mean leave the ‘amp’ out?
   tried that too but it just left `&nbsp` written over the image. Thanks for all
   your input – it’s always very appreciated 🙂
 *  [Mark (podz)](https://wordpress.org/support/users/podz/)
 * (@podz)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74826)
 * Odd……. you on msn ?
 *  [NuclearMoose](https://wordpress.org/support/users/nuclearmoose/)
 * (@nuclearmoose)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74829)
 * Should be &  
 *  Thread Starter [shadow](https://wordpress.org/support/users/shadow/)
 * (@shadow)
 * [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74830)
 * Yet again, The Master – Podz – comes through and makes it all seem so simple.
   
   What would we do without this guy… You are a star PODZ…Thanks 🙂

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Inserting an image using css’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 13 replies
 * 5 participants
 * Last reply from: [shadow](https://wordpress.org/support/users/shadow/)
 * Last activity: [21 years, 10 months ago](https://wordpress.org/support/topic/inserting-an-image-using-css/#post-74830)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics