Search code examples
htmlcsspositioning

CSS: Positioning images in a Div


I'm looking to position images over top of a div which has a set background. I'm using CSS to style the div as well as the images sitting on top of the background but I'm not seeing the results that I'd expect. The images which are sitting on top of the div's background image does not adjust based on my pixel settings.

Here's my HTML:

<div class="colorpicker" id="colorpicker">
    <img src="images/color_unselected.png" class="unselected" />
    <img src="images/color_C.png" class="c_image" />
    <img src="images/color_K.png" class="k_image" />
    <img src="images/color_M.png" class="m_image" />
    <img src="images/color_Y.png" class="y_image" />
</div>

Here's my CSS:

#colorpicker{
    border: 0px;
    width: 63;
    height: 342;
    position: relative;
    margin: 0px auto;
    margin-left: 1002px;
    background-image: url(images/color_tab_container.png);
    background-repeat: no-repeat;
}
#colorpicker.unselected{
    top: 50px;
    right: 25px;
}

Solution

  • I can't make up from your question how exactly you want to position those four images, but I would make a selector for your images and not the parent div:

    html:

    <div class="colorpicker" id="colorpicker">
      <img src="images/color_unselected.png" class="unselected">
      <img src="images/color_C.png" id="c_image" class="image" />
      <img src="images/color_K.png" id="k_image" class="image" />
      <img src="images/color_M.png" id="m_image" class="image" />
      <img src="images/color_Y.png" id="y_image" class="image" />
    </div>
    

    css:

    img.image {
      /*whatever you want to do here*/
    }
    #colorpicker {
      border: 0px;
      width: 63;
      height: 342;
      position: relative;
      margin: 0px auto;
      margin-left: 1002px;
      background-image: url(images/color_tab_container.png);
      background-repeat: no-repeat;
    }
    #colorpicker.unselected{ top: 50px; right: 25px; }
    

    Sidenote: you can just type/copy-paste the code here, select in and press the above 'code sample' button. This will display it correctly as you see above (make sure you do this for html and css separately) :-)