Как сделать header и footer с разными повторяющимися по горизонтали background картинками?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#title {
top:0;
height:20%;
background-attachment:scroll;
background:url('header.webp');
background-origin:padding-box;
background-repeat:repeat-x;
background-size: auto 100%
}
#footer { position:absolute;
bottom:0;
height:10%;
background:url('footer.webp');
background-attachment:scroll;
background-origin:padding-box;
background-repeat:repeat-x;
background-size: auto 100% }
</style>
</head>
<body>
<header>
<div id="title"></div>
</header>
<article>some text</article>
<footer>
<div id="footer"></div>
</footer>
</body>
В Firefox картинки не отображаются. Как реализовать такое?