How can i put a responsive Text over an responsive Image?

1

Hello Guys i hope someone has a tip for me. How can i put a Text over an Image and make both responsive. I found some ideas on my research but all didn’t help me out. Is there a way to do this with html, css and bootstrap?

2

You can use position absolute for the text and add img-responsive class in the image.

Not sure if that’s what you meant but take a look: https://jsbin.com/mukumadala/edit?html,css,output

3

Yeah i tried this too, but i searched for a Method, that makes my text smaller, if the device has a smaller screen.

4

What you can do is use the css @media then you have to specify what’s the font-size you want.

.text {
  position: absolute;
  color: whitesmoke;
  font-size: 32px;
}

@media (min-width: 768px) {
  .text {
    font-size: 64px;
  }
}

Example: https://jsbin.com/yixubusugu/edit?html,css,output
Take a look here: http://getbootstrap.com/css/#grid

5

ok i will try that thank you