Lesson: lesson-background-repeated

This example should show a background image stretching over the complete width and height of the printable area.

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
ERROR
Download
No background image support

Stylesheet

1
2
3
4
5
6
@import url("../styles/a4.css");

body {
    background-image: url(back.jpg);
    background-repeat: repeat-y;
}

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <p>Quis, odio. Donec lobortis, elit bibendum euismod faucibus, velit nibh
        egestas libero, vitae pellentesque elit augue ut massa.</p>

        <p>Nulla consequat erat at massa. Vivamus id mi. Morbi purus enim, dapibus a,
        facilisis non, tincidunt at, enim. Vestibulum ante ipsum primis in faucibus
        orci luctus et ultrices posuere cubilia Curae; Duis imperdiet eleifend arcu.
        Cras magna ligula, consequat at, tempor non, posuere nec, libero. Vestibulum
        vel ipsum. Praesent congue justo et nunc. Vestibulum nec felis vitae nisl
        pharetra sollicitudin. Quisque nec arcu vel tellus tristique vestibulum. Aenean
        vel lacus. Mauris dolor erat, commodo ut, dapibus vehicula, lobortis sit amet,
        orci. Aliquam augue. In semper nisi nec libero. Cras magna ipsum, scelerisque
        et, tempor eget, gravida nec, lacus. Fusce eros nisi, ullamcorper blandit,
        ultricies eget, elementum eget, pede. Phasellus id risus vitae nisl ullamcorper
        congue. Proin est.</p>

        <p>Sed eleifend odio sed leo. Mauris tortor turpis, dignissim vel, ornare ac,
        ultricies quis, magna. Phasellus lacinia, augue ac dictum tempor, nisi felis
        ornare magna, eu vehicula tellus enim eu neque. Fusce est eros, sagittis eget,
        interdum a, ornare suscipit, massa. Sed vehicula elementum ligula. Aliquam erat
        volutpat. Donec odio. Quisque nunc. Integer cursus feugiat magna. Fusce ac elit
        ut elit aliquam suscipit. Duis leo est, interdum nec, varius in, facilisis
        vitae, odio. Phasellus eget leo at urna adipiscing vulputate. Nam eu erat vel
        arcu tristique mattis. Nullam placerat lorem non augue. Cras et velit. Morbi
        sapien nulla, volutpat a, tristique eu, molestie ac, felis.</p>

        <p>Suspendisse sit amet tellus non odio porta pellentesque. Nulla facilisi.
        Integer iaculis condimentum augue. Nullam urna nulla, vestibulum quis, lacinia
        eget, ullamcorper eu, dui. Quisque dignissim consequat nisl. Pellentesque porta
        augue in diam. Duis mattis. Aliquam et mi quis turpis pellentesque consequat.
        Suspendisse nulla erat, lacinia nec, pretium vitae, feugiat ac, quam. Etiam sed
        tellus vel est ultrices condimentum. Vestibulum euismod. Vivamus blandit.
        Pellentesque eu urna. Vestibulum consequat sem vitae dui. In dictum feugiat
        quam. Phasellus placerat. In sem nisl, elementum vitae, venenatis nec, lacinia
        ac, arcu. Pellentesque gravida egestas mi. Integer rutrum tincidunt libero.</p>

        <p>Duis viverra. Nulla diam lectus, tincidunt et, scelerisque vitae, aliquam
        vitae, justo. Quisque eget erat. Donec aliquet porta magna. Sed nisl. Ut
        tellus. Suspendisse quis mi eget dolor sagittis tristique. Aenean non pede eget
        nisl bibendum gravida. Class aptent taciti sociosqu ad litora torquent per
        conubia nostra, per inceptos himenaeos. Morbi laoreet. Suspendisse potenti.
        Donec accumsan porta felis.</p>

        <p>Fusce tristique leo quis pede. Cras nibh. Sed eget est vitae tortor
        mollis.</p>
    </body>
</html>