Write text on background image is not responsive

Question

I want to write some text on image, i set the image as background to my div element but when i write the text it goes outside the image in small screen devices. how can that be fixed to make it full responsive ? I've write this code :

 #background { background: url("../../imgs/88246.jpg") no-repeat; background-size: 100%; } 

 <div class="h-100 container-fluid"> <div id="background" class="row h-100 justify-content-center align-items-center"> <h1 class="display-4">AYMAN TARIG</h1> </div> </div> 

Answer 1

You can do it by playing around with vw as the font-size and image width so they both resize together responsively. Read more about vw here .

Here's an example of how you can make it work:

#background {
  background: url("https://images.unsplash.com/photo-1547845737-153b5373560f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2531&q=80") no-repeat;
  background-size: cover;
}

.h-100 {
  height: 20%;
  width: 25vw;
  overflow: hidden;
}

h1 {
  display: block;
  font-size: 6vw;
}

If you go this go codepen you can see what I'm talking about in action:

https://codepen.io/MatthewRader/pen/aMrvrx

Answer 2

TABLET

 @media screen and (max-width: 1024px){
 h1 { font-size:SIZETHATFITS}}

PHONE

 @media screen and (max-width: 480px){
 h1 { font-size:SIZETHATFITS}}

@media screen and (max-width: #px) will only affect the font-size up to that max-width.