Shawn Shawn - 5 months ago 20
CSS Question

Repeating css image as content

I need to have an image repeat and be visible both on the screen and while printing. So far using

body {
background:url(images/confidential.png) repeat;
}

@media Print {
body:before {
content: url(images/confidential.png);
position: absolute;
z-index: -1;
}
}


works with the exception of the repeat when printing. Suggestions? Thanks.

Answer

Most browsers' default behavior is not printing the background colors. But image, SVG and property content does it well.

Use SVG solution(fill pattern) to achieve like the repeating image background:

https://jsfiddle.net/k459wv6w/

<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
  <defs> 
    <pattern id="rainbow" patternUnits="userSpaceOnUse" width="300" height="300"> 
      <image xlink:href="http://www.fnordware.com/superpng/pnggrad8rgb.png" 
        x="0" y="0" width="300" height="300">
      </image> 
    </pattern> 
  </defs> 
</svg>
<svg height="100%" width="100%" style="float:left" class="pattern-swatch">
  <rect style="fill: url(#rainbow) #fff;" x="0" y="0" height="100%" width="100%"></rect>
</svg>
Comments