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?

Have you considered using a CSS background image instead of an HTML image? — Eamonn O'Brien-Strain, Nov 02 '13 at 16:39

score 1 · Answer 1 · answered Nov 02 '13 at 16:55

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

score 0 · Accepted Answer · answered Nov 02 '13 at 16:43

0

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

answered Nov 02 '13 at 16:43

Cozmoz

171
1
13

2

Why involve that much complexity? The OP didn't mention SVG or anything along those lines – Zach Saucier Nov 02 '13 at 16:46
I just figured it was an easy way to have the text scale alongside the image. Doing some research, this would work equally well: http://css-tricks.com/viewport-sized-typography/ – Cozmoz Nov 02 '13 at 16:56

Scaling text and image in CSS

2 Answers2

Linked