Scaling text and image in CSS

Question

I'm trying to scale my background image to fit any screen and at the same time writing text over the image and having this scaling to fit the screen size as well. This is the site: www.beautebeaute.dk

I have the background image in place by searching answers in this forum. It works great with this code:

CSS

#imagescale {    
    width: 100%; 
    position: scroll; 
    left: 0px; 
    top: 0px; 
} 

.stretch {
    width:100%;
    height:100%;
}

HTML:

<div id="imagescale"><img src="http://beautebeaute.dk/wp-content/uploads/2013/11/Topbilledeny.jpg" class="stretch" alt="" / >

But I can't seem to work out how I can write a code for the overlaying text that will scale with the image. If I use the guide that I found in this forum, it will not flow with the screen on web, mobile etc. Can you help?

Answer 1

If you want the div fill the whole viewport, you must first set

html, body {
    height: 100%;
}

Then you can give

#imagescale {    
    width: 100%;
    height: 100%;
}

To fill it with the image

#imagescale {
    background-image: url(http://lorempixel.com/1200/1000);
    background-repeat: no-repeat;
    background-position: center top;
}

Now, you can center the text. One solution is here at CSS tricks Centering in the Unknown

#imagescale {
    text-align: center;
}

#imagescale:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

See full JSFiddle

Answer 2

Why not add the text as an svg image and have it scale?