Positioning HTML text on background images

A great slider / 'Hero Box' or banner can add interest and set the tone of a website, and convey some meaning. Eye-tracking research has shown that people are attracted to information-carrying photos - but positioning HTML text on an image isn't straightforward in responsive web design. (Responsive websites are designed to adapt to the screen size or content to fill the space available best).

However, this creates a dilemma for web designers who wish to position HTML text before a fluid background image. (i.e. it resizes proportionally depending on the container size). This is best demonstrated visually...

In the case above, we can't simply add text onto the image and save it as flattened because the reader may crop at specific resolutions - The house and the builder get cut at extreme solutions.

So... the next best solution is to work with percentages to position text within an image container. Although results will never be perfect for possible screen size, we can find a middle ground for most key resolutions. If there is time, it is possible to fine-tune the layout using multiple media queries and multiple CSS (cascading style sheets) files based on width and height brackets, but perfecting this can be highly time-consuming for the developer.

The examples below position text at 10% from the right and top edge of the container. The text is positioned here because there is some clear space in this area.

At a taller and tighter resolution screen, the text starts to touch the builder's helmet, but vertically there is suitable space...

Regarding the mobile version, it is deemed too tight to ensure the text appears on the graphic - so the reader is positioned below the picture using CSS. If we did decide to scale the text down, it would probably be too small for mobile devices, and leading search engines like Google / Bing would state the website is not mobile-friendly, which could have implications for the website's ranking.

Other examples...

Sometimes background images will not work if the idea is too complex or colourful. In these situations, it is always better to add a highlight to the text or merely reduce the opacity of the background image so the text can be legible... We used this method when we built the 'Revere London' website. Highlight text example - "The ultimate expression of individuality".

Or it is possible to centre the text (both vertically and horizontally) and ensure your background image is transparent so the text/background has good contrast...

Complex positioning of floating text on background images can be very trying, as mentioned earlier, but achievable with multiple CSS files. The example below is a responsive website requiring severe tweaks to ensure the text was positioned as best as possible. Here we used absolute positioning (as percentages) and added multiple media queries which load the most suitable CSS file based on the overall page width:

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/generic.css">
<link rel="stylesheet" media="screen and (max-width: 1680px)" href="css/x1680.css">
<link rel="stylesheet" media="screen and (max-width: 1540px)" href="css/x1540.css">
<link rel="stylesheet" media="screen and (max-width: 1500px)" href="css/x1500.css">
<link rel="stylesheet" media="screen and (max-width: 1360px)" href="css/x1360.css">
<link rel="stylesheet" media="screen and (max-width: 1280px)" href="css/x1280.css">
<link rel="stylesheet" media="screen and (max-width: 1200px)" href="css/x1200.css">
<link rel="stylesheet" media="screen and (max-width: 1120px)" href="css/x1120.css">
<link rel="stylesheet" media="screen and (max-width: 1154px)" href="css/large.css">
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/laptop.css">
<link rel="stylesheet" media="screen and (max-width: 900px)" href="css/tablet_new.css">
<link rel="stylesheet" media="screen and (max-width: 900px)" href="css/mobile.css">

And here, we can see how the page renders at different widths...