HTML img repeat?

Tim · 06-07-2011, 07:50 PM

Hey everyone,

I want to know if theres a way to do:

*Example*
"background-repeat: repeat 90% 110%;"

On a html img

so it should be like this:

<img src="img/background2.png" width="500" height="500" id="bg" style="background-repeat: repeat 20% 20%;"/>

But that doesnt work.
I cant do it in the css because im using a Jquery that targets the html img and i dont know that much about jquery.

What i want to know is:
-Is this even possible if yes
-How can I solve it

Thanks for your help,
Tim

Pheno · 06-07-2011, 09:34 PM

No that would just be repeating the background of the image, rather than repeating the image. It's not possible to do what you want as far as I know.

lanmys · 06-08-2011, 02:22 AM

Quote:

Originally Posted by Tim

Hey everyone,

I want to know if theres a way to do:

*Example*
"background-repeat: repeat 90% 110%;"

On a html img

so it should be like this:

<img src="img/background2.png" width="500" height="500" id="bg" style="background-repeat: repeat 20% 20%;"/>

But that doesnt work.
I cant do it in the css because im using a Jquery that targets the html img and i dont know that much about jquery.

What i want to know is:
-Is this even possible if yes
-How can I solve it

Thanks for your help,
Tim

Try to make it like this "{
background-image:url('paper.gif');
background-repeat:repeat-20%;
}"

computerGeek · 06-08-2011, 01:22 PM

Quote:

Originally Posted by lanmys

Try to make it like this "{
background-image:url('paper.gif');
background-repeat:repeat-20%;
}"

doesn't work on my project..

d a v e · 06-08-2011, 04:45 PM

post a link to the page you have then - we need more info

Tim · 06-08-2011, 09:47 PM

Okay, i diddnt fix the problem but i solved it. I just made a full size picture so i dont have to repeat it... To bad for the load time but w/e.

Now i have another problem. If i need to make a new tread for it just say it.

The problem is: The earth you see in the link below its in the middle. I tried bottem: 0px; but that doesnt work. It needs to be on relative to make it stay in the middle

http://www.vandevathorst.nl/tim/tb/thinkingbitsv3/

PixelPusher · 06-09-2011, 06:52 PM

First off, resorting to a large image and increasing your load time is a poor decision as web designer. In my opinion I would ditch the repeating image, before harming my page load time. Think if you loose your visitor due to page delay it doesn't matter what images are in your site.

I encourage you to find a alternate solution.

Now about images. The image element "<img />" should be used for content based images only. Meaning an image that adds to the contextual content of the page (i.e. picture of a house). Otherwise any image that is nothing more than styling (i.e. icons, gradients) should be applied through the css background property.

Moving on...

If you're using jquery and trying to make a "background" image repeat in element try something like this:

Code:

$('div.test').css({
   background: url() repeat [val] [val];
});

06-07-2011, 07:50 PM	#1
Tim Bronze Member Join Date: Jan 2011 Posts: 28	HTML img repeat? Hey everyone, I want to know if theres a way to do: Example "background-repeat: repeat 90% 110%;" On a html img so it should be like this: <img src="img/background2.png" width="500" height="500" id="bg" style="background-repeat: repeat 20% 20%;"/> But that doesnt work. I cant do it in the css because im using a Jquery that targets the html img and i dont know that much about jquery. What i want to know is: -Is this even possible if yes -How can I solve it Thanks for your help, Tim

06-07-2011, 09:34 PM	#2
Pheno Silver Member Join Date: Apr 2011 Posts: 114	No that would just be repeating the background of the image, rather than repeating the image. It's not possible to do what you want as far as I know. __________________ Small Business Web Design

06-09-2011, 06:52 PM	#7
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	First off, resorting to a large image and increasing your load time is a poor decision as web designer. In my opinion I would ditch the repeating image, before harming my page load time. Think if you loose your visitor due to page delay it doesn't matter what images are in your site. I encourage you to find a alternate solution. Now about images. The image element "<img />" should be used for content based images only. Meaning an image that adds to the contextual content of the page (i.e. picture of a house). Otherwise any image that is nothing more than styling (i.e. icons, gradients) should be applied through the css background property. Moving on... If you're using jquery and trying to make a "background" image repeat in element try something like this: Code: $('div.test').css({ background: url() repeat [val] [val]; }); __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

06-08-2011, 04:45 PM	#5
d a v e Platinum Member Join Date: Sep 2010 Posts: 509	post a link to the page you have then - we need more info

06-08-2011, 09:47 PM	#6
Tim Bronze Member Join Date: Jan 2011 Posts: 28	Okay, i diddnt fix the problem but i solved it. I just made a full size picture so i dont have to repeat it... To bad for the load time but w/e. Now i have another problem. If i need to make a new tread for it just say it. The problem is: The earth you see in the link below its in the middle. I tried bottem: 0px; but that doesnt work. It needs to be on relative to make it stay in the middle http://www.vandevathorst.nl/tim/tb/thinkingbitsv3/