Placing HTML elements on an image with dynamic size

Question

A designer has created an image for us with three selection boxes. I added HTML elements and CSS such that three selection boxes would appear and would overlap the boxes on the image. These were positioned using pixel values.

The image of the designer was too large for mobile devices, so I created a smaller version of it. The image is as follows:

If the user's device width is below a certain threshold, the page loads this image instead and positions it in the middle. If the device width is smaller than the image, the image should scale to fit, and the selection boxes should also scale to overlap the image. I am having trouble with this last part.

I have prepared a (cleaned) fiddle here. According to my findings so far, there are two opposing CSS rules:

• The width is dynamic, but the width/height proportion must be equal. I have solved this by adding the following code inspired by this answer:

  #container {
      width: 100%;
      max-width: 458px;
      margin: auto;
  }
  
  #banner {
      height: 0px;
      padding-bottom: calc(100% * 350 / 458);
      background-image: url('https://s29.postimg.org/f5xjgn53b/selector_header_small_anonymous.png');
      background-size: 100% 100%;
  }
  

• I have currently set the height and top of various elements to be a percentage. For these values to be relative to the width, the height of its parents should also be set. However, the #banner element has a height of 0px due to the first solution. Therefore, these now all evaluate to 0px.

How can I adjust my code, such that

1. The select elements overlap the select elements in the image, and
2. The select elements are resized whenever the container is resized?

I would prefer this solution to be HTML & CSS only, though javascript is acceptable.

Answer 1

You are trying to do something that is intrinsically impossible. There are a myriad of use-cases I can think of that would break your design. This is also bad practice and bad accessibility on many levels.

Depending on where you live and who your client is, you are at least in breach of the UN treaty on rights of people with disabilities. I know the US and Canada have ratified and enacted into law, as has most of the EU.

However, there is an easier way to do this that is also a lot more compliant.

<div id="container">
<fieldset id="banner">
<ol>
    <li>
    <legend>A descriptive legend (accessibility requirement)</legend>
    <label for="first">A descriptive label (accessibility requirement)</label>
    <select class="selector" id="first" name="first">
        <option value="-1">Selector</option>
    </select>
    </li>
<!--- rinse and repeat --->    
</ol>
</fieldset>
</div>

You are a presenting a list of items, so ol is appropriate semantically. It also offers better navigation for users of assistive technology.

Now, to get the look that you want, style the numbers of the list as described here:

http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

Style the label with that green bar you have there. (Mind to not use color as indicator exclusively, 1 in 12 males is color blind.) And simply give your fieldset a gray background.

I can think of ways to to this CSS-only, but for speed I'd use SVG images for the arrow bit with a PNG fallback for older browsers.

HTH. Good luck and have fun.

Answer 2

This seems a very unusual and unwieldy way of going about things. Personally I would split the image into three to show the 1, 2 or 3. Then I would use three separate layout elements to control the selection boxes, either separate divs or maybe table rows. Each layout element would contain an image and a selection box.