Repeating css image as content

Question

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.

Most browsers ignore the background when printing, so in this case only the content from the body::before is used. This is a browser setting, not a problem with your css. — Mr Lister, Jun 11 '16 at 17:04
@MrLister That's the point of this css. I need to get the content to repeat. — Shawn, Jun 11 '16 at 21:31
http://stackoverflow.com/questions/11242991/how-to-forcefully-print-background-image-in-html - this post may help you — San, Jun 13 '16 at 12:07
@Shawn You don't understand; this is a *browser* issue. Meaning you can't control it with CSS. — TylerH, Jun 13 '16 at 12:59
@TylerH I'm not sure how this is a browser issue as this code currently prints the image just fine, regardless of browser settings. The only thing I need is some way to get the image to repeat. — Shawn, Jun 13 '16 at 13:02
Have you considered adding a repeated image (very large image, multiplying the original image a few times) in your print speficic css? — Mr. Hugo, Jun 13 '16 at 21:20
@JoostS Good idea, any way I can make it clip as if it was a normal background image? — Shawn, Jun 14 '16 at 02:16

twxia · Accepted Answer · 2016-06-14T16:16:47.440

4

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>

edited Jun 14 '16 at 16:16

answered Jun 14 '16 at 08:19

twxia

1,813
1
15
25

This seems promising. How do I move it to the background? It does not look like SVG has Z-indexes? – Shawn Jun 14 '16 at 11:42
To clarify, I have a table that I'd like this to fill. – Shawn Jun 14 '16 at 12:11
@Shawn `svg` element can use z-axis, but inside it can't. It's 2d canvas don't have z-axis. sample: https://jsfiddle.net/k459wv6w/3/ – twxia Jun 14 '16 at 13:21
It'd be perfect if it only filled the table, but I can live with this. Thanks for your help fixing this _browser_ problem. – Shawn Jun 14 '16 at 14:37
@Shawn sorry really don't know what you mean at first. you can use `position: absolute` to achieve your goal. Glad to help you :D – twxia Jun 14 '16 at 15:51

score 1 · Answer 2 · answered Jun 13 '16 at 12:59

I am not so sure if this could be an option to you. But even if you try to force the printing settings via CSS, different browsers can have different setting being switched on and off, Check link for more info, therefore you have an option to explicitly put the background image in <img> tag and style it as following:

.background {
  width: 100%;
  height: 100%;
  position: absolute;
  background: transparent url("http://www.fnordware.com/superpng/pnggrad8rgb.png") repeat scroll 0% 0%;
  //background-repeat: repeat-x;
}

I have created JsFiddle to demo this

Repeating css image as content

2 Answers2