How to bind element to background-image (responsive)?

Question

Is it possible to bind (HTML) elements to a background image of a parent element? In the following example code, I want the (hover) elements to always stay on the blocks, even when the window is resized to a small (mobile) sized screen.

 .steps { background: url(https://i.gyazo.com/c027c7cefa8f66fb10135547ac650d24.png) center no-repeat; background-size: contain; height: 95px; } .steps ul { /* margin-top: 0; */ /* margin-left: -246px; */ margin-left: -286px; left: 50%; top: 0%; margin-top: 13px; position: absolute; } .steps ul li { display: inline-block; margin: 0 2px; } .steps ul li a { display: block; height: 82px; width: 116px; /*margin-bottom: 22px;*/ text-indent: -9999em; } .steps ul li a:hover { background: rgba(255, 255, 255, 0.25); } 

 <div class="steps"> <ul class="list-unstyled"> <li> <a href="#">Block 1</a> </li> <li> <a href="#">Block 2</a> </li> <li> <a href="#">Block 3</a> </li> <li> <a href="#">Block 4</a> </li> </ul> </div> 

JSFiddle

The problem that occurs now is that the blocks won't stay in-line. I thought of putting a parent container element around all this but that will cause the image won't be centered then anymore.

Could anyone give me any advice on this?

Answer 1

I notice you are using:

position: absolute;

Absolute positioning is not a technique suitable for responsive design. With responsive design, you would usually use relative size units such as ems, and use relative positioning techniques instead of absolute. I would say you need to rethink your design technique to use relative size and relative positioning.