If you are overlaying a title text over an image for clarity there is a requirement to create a contrast between the text and background image.
If this is done in the image, or as a single page layout this may be customised as a one off.
However, if this is on a page template to be used throughout the website then there is the prospect that the text may not show dependant upon the choice of image.
If the theme has been designed with the background image to be set by the website owner, perhaps via the featured image, then more thought is required to ensure this clarity between the text and image.
It may therefore be practical to add an outline using CSS to the title text so that it stands out from the background. This maybe a shadow or a border.
The simplest form is a shadow in one direction
h1{
text-shadow:
1px 1px 0 #000;
}
To provide a border shadow all the way around the text add a shadow to each of the four corners.
To do so isn’t a repeat of the same text-shadow
h1{
text-shadow:
-1px -1px 0 #000;
text-shadow:
1px -1px 0 #000;
text-shadow:
-1px 1px 0 #000;
text-shadow:
1px 1px 0 #000;
}
as the latest one would be the version implemented.
To add a border all the way around comma separate each setting:
h1{
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
In the example above 4 text shadows are added to the text, one for each diagonal.
