How to repeat image in img tag (not a CSS background image)

Question

On my page, I have a logo in the upper left corner with a repeating image creating a banner extending over the the right of the page. They work nicely using background images.

.logo {
    background: white url('img/logo-sml.png') center no-repeat;
    width: 81px; height: 62px;
    outline: 7px solid #D15F08;
    padding: 8px 2px;
    position: absolute; top: 15px; left: 15px;
}
.topstripe {
    background: transparent url('img/bg_top.png') repeat-x scroll 0 0;
    height: 39px;
    margin-left: 10px;
}

Many of my visitors like to print the pages, and I would like the logo and stripe to appear when printing. I have read pages that discuss a separate CSS page for printing. Where I have a repeating image, is this my only option, or is there a way to get an image in an IMG tag to repeat?

i.e. something like:

<img src="img/bg_top.png" style:"display: repeat-x"/>

But in a way that will print.

Not that I'm aware of. But you can display a repeating background image only on print by using media queries: @media print { /* CSS here */ }. — agrm
When I looked at other answers using @media print, it appeared that the goal was to create a dumby that was invisible normally, but then became visible when printing. In such a case, the repeat-x still causes a problem, right? Or does that tag force it to print, so I just repeat the same CSS, but now within the tag? — Thomas
Sorry, ignore my last comment. Using @media print will not force the browser to print background images. When that's said, what does your repeating background/stripe look like? Will you be able to simply stretch the image to a width of 100%? — agrm
It has a pattern that would need to be repeated, so a stretch would not work. — Thomas

Thomas Thomas · Accepted Answer · 2018-12-07T03:51:35

I am not sure if this is possible. What I did, to solve my need, was to leave my image in the top banner per the CSS above, but then added an @media print attribute that was "close enough" for the print versions:

.printtopstripe { visibility: hidden; }
@media print {
    .topstripe {
        background: none;
        height: 15px;
    }
    .printtopstripe { visibility:visible; height:17px; width:100%; }
}

If somebody comes up with a better solution, please post it, I am happy to change my solution and choose theirs.

How to repeat image in img tag (not a CSS background image)

1 Answers