如何用“ background-size：cover”修复文本？

Question

So, i used this code for my div background:

.bg{
background: url(http://cl.ly/image/1n0I2G3K231f/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   height: 100%;
}

Thing is, I want to put a text in the page that stays in a certain area of the background image. The problem is that the background image adapts the users screen size (as it was supposed to), and this makes the text to stay in different positions in the image depending on the user's screen size.

http://ftestes.ueuo.com/help/test.html

How can i accomplish this?

Answer 1

I would try to give the actual container (the one with the background image):

position: relative;

And then give you text a class/id, and give it this:

position: absolute;
top: 5%; /*these values depend on where you want the text*/
left: 5%;/*you can also use bottom or right if needed*/

Please keep in mind that the font won't re-size. What you're trying to do is pretty tough to accomplish but this should help you get started.

UPDATE:

Here is a function I wrote that will change font size based upon the size of your window. It doesn't change dynamically, but will change on page load.

http://jsfiddle.net/plushyObject/n3kkg470/1/

instead of $(window) in that function, you could give your div with the background an ID and drop it in there.

$('#idYouGave').width();