repeat img like it is a background

Question

What i want to do seems simple but i guess its alot harder then i thought.

Cause background images wont be printed (i mean by a printer on paper) by default and i want to allow the user to print the background they have chosen i want to use a image.

So i have a div of 800 x 400 and an image of 1x1 wich is completely 1 color lets say red.

I want that image to be repeated to fill the div .

the images are diffrent sizes i have images with patterns of 50x50 with repeating patterns.

So stretching the image wont help.

So how can i repeat an image like it is a background?

Please first try your solution cause printing background-images is dependent on the browser your use, but you have to assume backgrounds (colors and images) arent printed !

So i DON'T want to use any kind of background i just want to repeat the image , to make it act like a background without being a background !

even if it is possible to print the background, i still would like to know how to make the img repeat.

Example

http://jsfiddle.net/aAsjv/

The img on the left div needs to be repeated horizontaly and verticaly, so it fills the whole

  div #board.

It would really help knowing what you've tried so far, otherwise others might make countless identical attempts. — SBI, Apr 10 '13 at 08:55
Try one of these: http://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie Or you could use JQuery to dynamically create img tags and float them left. — gaynorvader, Apr 10 '13 at 08:56
the problem is that i want to repeat the image they use 1 img and dont repeat it, i can print 1 image but i want that 1 image to cover the complete div. — Sven van den Boogaart, Apr 10 '13 at 09:00
if the image is 1px x 1px, then why not just use a solid colour? — , Apr 10 '13 at 09:00
cause it is just an example i stated later in my question that i also use patterns of 50px x 50px adding a color there wont help — Sven van den Boogaart, Apr 10 '13 at 09:02
ok, why do you need it to be an `img` and not a css background? — , Apr 10 '13 at 09:04
try printing a page with a background like http://stackoverflow.com/ the header has a backgroun-color and it will be hidden. it is default for browser to not print backgorund-color background-image to save inkt. but i want the user to print it cause they chose the background — Sven van den Boogaart, Apr 10 '13 at 09:05
try this. http://stackoverflow.com/questions/6670151/how-can-i-force-browsers-to-print-background-images-in-css — , Apr 10 '13 at 09:07
Chris if you see the accepted answer they say i have to do what i ask. so set a image and give it low z-index so it is in the background but still a normal img. thats exactly what i want to do but i need to repeat that img. — Sven van den Boogaart, Apr 10 '13 at 09:09
@SvenB, Can you post some code, maybe a jsfiddle? It would help determine how best to solve your problem. — gaynorvader, Apr 10 '13 at 10:42

gaynorvader · Answer 1 · 2013-04-10T13:12:38.693

1

You can duplicate elements using .clone() in JQuery. For example:

HTML:

<div id="wrapper">
    <img class="repeat" src="#" />
</div>

CSS:

img.repeat{ float:left; }
#wrapper{ width: 800px; height: 400px; }

JS:

$(document).ready(function(){
    $('img.repeat').clone().appendTo('#wrapper');// repeat as many times as neccesary
});

An example using divs: http://jsfiddle.net/hDyam/

edited Apr 10 '13 at 13:12

answered Apr 10 '13 at 11:31

gaynorvader

2,619
3
18
32

It needs to be repeated vertically and horizontaly – Sven van den Boogaart Apr 10 '13 at 11:40
1

Shouldn't that image tag be written as: What's with the closing tag? – Michael Giovanni Pumo Apr 10 '13 at 11:54
@MichaelGiovanniPumo: Yes, you're right, I was changing from a div, edited it there. @SvenB: It should float underneath when the total width of the images exceeds the width of the wrapper. If not, you could use `$('img.repeat').css('clear','both');` each time you want to start a new line. – gaynorvader Apr 10 '13 at 13:15

This_is_me · Accepted Answer · 2013-04-11T12:58:15.173

Just click on another pattern on the right and see what happens.

Made it with jQuery (so not the best method for doing stuff like this) however it is working, if you understand jQuery (which I guess you do) it is pritty simple code to understand

$(function(){
   repeat_bg();    
    $("#imgs img").click(function(){
        var src = $(this).attr('src');
        $("div#hidden_bg img#dummy").attr("src",src);
        repeat_bg();            
    });
});

function repeat_bg()
{
    var board_width = $('#board').width();
    var board_height = $('#board').height();
    var bg_width = $('#dummy').width();
    var bg_height = $('#dummy').height();


    var count_horizontal = board_width / bg_width;
    count_horizontal= Math.ceil(count_horizontal);

    var count_vertical = board_height / bg_height;
    count_vertical= Math.ceil(count_vertical);
    $('div#background_hack').html("");
    $('div#background_hack').css('width' ,board_width+bg_width);

    /*
    * repeat
    * alert("horizontal we need: "+count_horizontal + " images to fill up");
    * alert("vertical we need: "+count_vertical + " images to fill up");
    * alert("totaal needed images = "+count_horizontal + " * "+ count_vertical + "= "+count_horizontal * count_vertical);
    */

    for (var i=0;i<count_horizontal * count_vertical;i++)
    { 
       var clone = $('#dummy').clone();
        $('div#background_hack').append(clone);
    }    
}

link to jsFiddle

Wow freaking awsome ! exactly what i needed ! – Sven van den Boogaart Apr 10 '13 at 13:02 — Sven van den Boogaart, Apr 10 '13 at 13:02

score 0 · Answer 3 · answered Apr 10 '13 at 09:00

0

I have just read this : " Use background-image if you intend to have people print your page and you do not want the image to be included by default. "

So you have to use the IMG tag instead of background-image if you want the users to print the image as well.

answered Apr 10 '13 at 09:00

Hakim Simões

23
4

The question is how to repeat the image tag. – gaynorvader Apr 10 '13 at 09:04

score 0 · Answer 4 · answered Apr 10 '13 at 09:31

I would probably create some javascript that creates something like this (to give you an idea):

<style>
#bgcontainer
{
  width: 180;
  height: 180;
  overflow: hidden;
}
#innerbgcontainer
{
  width: 2000;
  height: 2000;
}
</style>

<div id="bgcontainer">
  <div id="innerbgcontainer">
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <br />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <br />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <br />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
  <img src="https://www.google.nl/images/srpr/logo4w.png" width=50 height=50 />
</div></div>

score -3 · Answer 5 · answered Apr 10 '13 at 08:54

-3

You have to set an ID for your div, and inside the CSS you have to use

background-repeat:repeat;

repeat img like it is a background

5 Answers5

HTML:

CSS:

JS: