4 Replies Latest reply: Nov 19, 2013 12:27 PM by rgreen001 RSS

    Responsive images CSS help

    rgreen001 Community Member

      I usually make my images responsive by adding

      max-width:100%; height:auto;

      to the css class that is being called for the image.

       

      However, I now have an image that is being used with a hover and click effect that I want to make responsive and the above doesn't want to work.

       

      The image I have has three parts to it. The top section is the normal state, the centre part is the hover state and the bottom section is the active state.

      The total image is 280px wide and 3x125px high.

       

      In the css I use:

      .p01-button {

          width: 280px;

          height: 125px;

          background: url('home01.png') top left no-repeat;

      }

      for the normal state and then:

      .p01-button:hover {

          background-position: center left;

      }

        for the hover state and 

      .p01-button:active {

          background-position: bottom left;

          padding-top: 0px;

      }

      for the active state.

       

      This all works fine with a full screen browser but the images don't scale on smaller screens.

      Can I make these responsive in a similar way to the first method?

       

      Many thanks in advance.