0

I'm developing an aplication which has boiler room schema like this one. https://www.solarfocus.com/website/var/tmp/image-thumbnails/0/390/thumb__product-detail-fancybox/schema_elegance_01.jpeg

I would ike that image is always taking 100% width but i don't know how to do it.

Also if image is resizable those position relative divs inside a div won't be placed correctly.

I would really need an advice.

HTML:

.boiler_room_image {
  position: absolute;
  background-image: url('images/boiler_room_schema.jpeg');
  height: 700px;
  width: 870px;
}

.HVAC_LINE1_TEMP_ACT {
  position: relative;
  top: 270px;
  left: 270px;
  font-weight: bold;
}

.HVAC_VALVE_01_STS {
  position: relative;
  top: 208px;
  left: 710px;
  font-weight: bold;
}

.HVAC_VALVE_02_STS {
  position: relative;
  top: 405px;
  left: 165px;
  font-weight: bold;
}

.HVAC_VALVE_03_STS {
  position: relative;
  top: 300px;
  left: 710px;
  font-weight: bold;
}
<div class="boiler_room_image">
  <div class="HVAC_LINE1_TEMP_ACT">25.6°C</div>
  <div class="HVAC_VALVE_01_STS">OFF</div>
  <div class="HVAC_VALVE_02_STS">OFF</div>
  <div class="HVAC_VALVE_03_STS">OFF</div>
</div>

With best regards, Jan

Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
Jan Keber
  • 327
  • 1
  • 2
  • 8
  • use [background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) and set it's width to 100% - `background-size:100% auto;` – Pete Jan 26 '18 at 15:58
  • It works, image is resizing perfectly but when i make my browser window smaller then all DIVs inside that DIV are misplaced. Is there a fix for that? `
    ON
    `     – Jan Keber Jan 29 '18 at 11:29
  • 1
    Please post a new question as that is a different problem to your original one above – Pete Jan 29 '18 at 11:30

1 Answers1

0

You can use: 

background-size: cover;

in .boiler_room_image, and that would do.

Juanjo Espí
  • 21
  • 4
  • It works, image is resizing perfectly but when i make my browser window smaller then all DIVs inside that DIV are misplaced. Is there a fix for that? `
    ON
    `     – Jan Keber Jan 29 '18 at 11:26
  • You are using absolute positions and give absolute values for that positions. That's too restrictive and that's why it doesn't work good when you resize the window. You should try to use relative positions and sizes or maybe you should read something about responsive web design. – Juanjo Espí Feb 02 '18 at 11:00