Ensuring sufficient contrast between background colors and images is necessary to ensure that readers who have difficulty distinguishing contrasts are able to read your publication. Avoid overlaying text on noisy (multi-color) background images, and relying on positioning to avoid color contrasts, as different reading system may reflow content in unexpected ways.
Also ensure that background images do not convey information necessary to understand the publication, or to be able to interact with it. Unlike embedded images, backgrounds cannot be given text alternatives or descriptions and a reader will not know a change has occurred.
Note
The background-image property remains largely unsupported because of the reflowable
nature of EPUBs. Although support may increase as fixed-layout publications get supported, use of
images is not recommended in general, reflowable publications.
For fixed layout publications, try to limit backgrounds to simple atmospheres. If components of the
background are important to comprehension, see if they can be overlaid using img tags so
that descriptions can be added.
body {
background-image: url('img/wonderland02.jpg');
}This example shows how a children's picture book could be made more accessible by combining dynamic elements with a static background. In a real-world scenario, CSS would be used for more than just positioning the images and dialogue, but could enhance the display for visual rendering by adding advanced animations and transforms (for systems that support these features).
Using this approach, the dialogue and text alternatives convey information that will allow a reader to follow the storyline. A reader with basic visual rendering will see a static version of the ultimate display, and a reader with an advanced system will get the full experience. This gradual increase in functionality is at the root of progressive enhancement.
The example makes use of the EPUB 3 fixed layout metadata to define the page size.
<html …>
<head>
<meta
name="viewport"
content="width=1024, height=600"/>
…
<style type="text/css">
body {
background-image: url('img/oz02.jpg');
}
img#oz {
position: absolute;
left: 0px;
top: 25px;
}
p#oz-speaks {
position: absolute;
left: 120px;
top: 50px;
}
img#dorothy {
position: absolute;
right: 0px;
top: 125px;
}
p#oz-speaks {
position: absolute;
right: 140px;
top: 100px;
}
</style>
</head>
<body>
<img id="oz"
src="graphics/wizard001.jpg"
alt="A giant head floats over a chair in the middle of the room"/>
<p id="oz-speaks">
I am Oz, the Great and Terrible.
Who are you, and why do you seek me?
</p>
<img id="dorothy"
src="graphics/dorothy162.jpg"
alt="Dorothy works up the courage to reply"/>
<p id="dorothy-speaks">
I am Dorothy, the Small and Meek.
I have come to you for help.
</p>
</body>
</html>