How to make the background-image and text resize depending on the width of the screen, while maintaining the proportions. In particular, I'm trying to impose on Bootstrap'e. Shl. I specify the height of the text in Em. Below is the code:

.main__text { text-transform: uppercase; font-family: canter; color: #f1ede1; text-align: justify; font-size: 6em; } body { background-image: url(images/background.png); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }
  • With the text I solved the problem by specifying the height in vw. - Deepsleep

1 answer 1

What is wrong with the background? Everything works, see example.

 .main__text { text-transform: uppercase; font-family: canter; color: #f1ede1; text-align: justify; font-size: 10vw; } body { background-image: url('https://i.ytimg.com/vi/8NJPgd7AQYU/maxresdefault.jpg'); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } 
 <div class="main__text">Main text</div>