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

However, this leads to a dilemma for web-designers who wish to position HTML text in front of a fluid background image. (ie it resizes proportionally depending on the container size). This is best demonstrated visually...

Resize a website - Responsive

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

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 the time it is possible to fine-tune layout using multiple media-queries and using multiple CSS (cascading style sheets) files based on width and height brackets, but perfecting this can be extremely 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 you can see the text starts to touch the builder's helmet, but vertically there is good space...

With regards to the mobile version, it is deemed too tight to ensure the text appears on the graphic - so the text is positioned below the graphic 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 simply state the website is not mobile friendly and this could have implications for the website in terms of ranking.

Other examples...

Sometimes background images will simply not work if the image is too complex or colourful. In these situations, it is always better to add a highlight to the text or simply reduce the opacity of the background image so the text can be clearly 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 simply 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 laborious as mentioned earlier, but achievable with multiple CSS files. The example below is a responsive website that required some serious tweaks to ensure text was positioned as best as possible. Here we used absolute positioning (as percentages) and added multiple media queries which loads 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...