0

I have a product configurator where a user can enter values for a wall and the wall is displayed as a html element with a fixed with of 200px.

I have a SVG pattern file with a tile pattern. In reality the tiles are 16 x 16 cm in size. Now if the user enters a width of let us say either 160 cm or 320 cm, the svg pattern should fill the html element representing the wall, but one time it should be scaled so that it is repeated 10 times, one time so that it is repeated 20 times.

How can I make the background-scaling dynamic with only HTML, CSS, JS?

When I increase the width of the html element, the scaling of the pattern svg works nicely, but the size of the html element needs to stay fixed.

Hope anyone has any idea.

Improve this question
4
  • 1
    show us in code
    – Danny '365CSI' Engelman
    Commented Jul 3, 2022 at 17:36
  • Are the tiles being put in as a CSS background-image?
    – A Haworth
    Commented Jul 3, 2022 at 19:32
  • @AHaworth I can either put it as CSS backgroundimage or as an img-tag but neither is working
    – DevL
    Commented Jul 4, 2022 at 18:48
  • Tiles are often laid in staggered rows. Is that to happen here? It would help us help you if you could include code you have so far, including the SVG.
    – A Haworth
    Commented Jul 4, 2022 at 19:18
Related questions
6
Creating an svg that scales to the height of browser but has a set width
0
Scaling an SVG background
0
Scale svg image to fit parent as css background
Load 7 more related questions Show fewer related questions

0

Reset to default

Browse other questions tagged or ask your own question.