0

I'm working on a page with a long scrollable background image of the road. The page is intended for mobile devices primarily. I need to align several items (containers with text and images) according to the background so that those items would be located near certain points on the road.

The problem is that my background image width and height is changing depending on the mobile device screen, while the items preserve their position, and thus not aligned with the road anymore.

How can I fix this issue using SASS/CSS?

James Z
  • 12,209
  • 10
  • 24
  • 44
Rumata
  • 1,027
  • 3
  • 16
  • 47
  • 2
    Can you post your code so we can experiment on it? – Shihab Mar 13 '19 at 09:06
  • Did you set the fixed size of your bg img ? – Joe Koker Mar 13 '19 at 09:08
  • @shihab Unfortunately I can't do it, because I work in low-code mendix platform, this stuff is impossible to share separately. But it utilizes the same CSS, so any working solution with a regular web page, for example, should be very helpful for me, thank you! – Rumata Mar 13 '19 at 09:08
  • @JoeKoker If I will do it I afraid I won't be able to adjust the background size according to the mobile device size. I need the background to take all the screen width, and the items keep the same alignment according to the background. – Rumata Mar 13 '19 at 09:09
  • And if you set the background-image: cover and positioned your items with percentage to the place you need ? – Joe Koker Mar 13 '19 at 09:14

1 Answers1

0

You can use vw css unit to place the content element relative to screen width.

<div class="container">
    <div class="content">Content</div>
</div>

.container {
    background: url("//placehold.it/1500x1000") no-repeat;
    background-size: 100% auto;
    height: 1000px;
    position: relative;
}
.content {
    background: #f00;
    padding: 10px;
    position: absolute;
    left: 48vw;
    top: 35vw;
}

Checkout this codepen -> https://codepen.io/moorthy-g/pen/bZYyza

Moorthy G
  • 1,441
  • 8
  • 9