...

View Full Version : Repeating images



Saz
12-27-2006, 02:03 PM
Hi all, Just trying to setup a particular project where there's a small image that repeats itself all over the page in the foreground, (yes, in the foreground), *but* only using css.

Any ideas how you would do that please ?

Any help much appreciated.

Saz.

nikkiH
12-27-2006, 02:11 PM
Are you trying to protect text from copy/paste using a spacer? Because it takes about 2 seconds for a user to disable images or CSS entirely. They can always view source as well.

That said, if you are trying to do a spacer gif over the whole page, I think you can create a simple 1x1 "blank" gif and simply stretch it over the entire page using CSS width and height 100% and setting z-index very high.
I'm curious to see the other suggestions for this, too. :D

Saz
12-27-2006, 02:19 PM
That said, if you are trying to do a spacer gif over the whole page, I think you can create a simple 1x1 "blank" gif and simply stretch it over the entire page using CSS width and height 100% and setting z-index very high.
I'm curious to see the other suggestions for this, too. :D
Many thanks Nikki - any ideas on how the code would look for that please ?

Any help appreciated.

Saz.

codingmasta
12-27-2006, 02:37 PM
<style type="text/css">
body
{
background-image:
url(yourimage.jpg);
background-repeat:
repeat
}
</style>

Saz
12-27-2006, 02:59 PM
<style type="text/css">
body
{
background-image:
url(yourimage.jpg);
background-repeat:
repeat
}
</style>

Many thanks for the quick help on this CodingMasta - how would you adjust that code for it to be in the foreground please ?

Any help appreciated.

Saz.

nikkiH
12-27-2006, 03:58 PM
<html>
<head>
<title> New Document </title>
<style>
#cover {
position: absolute;
width: 100%;
height: 100%;
z-index: 200;
}
</style>
</head>

<body>
<img src="blank.gif" id="cover">
<p>
If a tree falls in the forest and no one is around to see it, do the other trees make fun of it?<br>
Why is it that bullets ricochet off of Superman's chest, but he ducks when the gun is thrown at him?<br>
If the Professor could build a radio out of coconut, why couldn't he fix a hole in the boat?<br>
What am I? Flypaper for freaks?<br>
If you only do what you know you can do - you never do very much. -- Tom Krause<br>
Courage doesn't always roar. Sometimes courage is the quiet voice at the end of the day saying, "I will try again tomorrow."<br>
Don't let life discourage you; everyone who got where he is had to begin where he was.<br>
Courtesies of a small and trivial character are the ones which strike deepest in the grateful and appreciating heart.<br>
Encouraged people achieve the best; dominated people achieve second best; neglected people achieve the least.<br>
If at first you don't succeed, find out if the loser gets anything.<br>
Patience, n. A minor form of despair, disguised as a virtue. -- A. Bierce<br>
If we treated everyone we meet with the same affection we bestow upon our favorite cat, they, too, would purr. - Martin Buxbaum<br>
I'm kind of jealous of the life I'm supposedly leading. - Zach Braff<br>
We can live without religion and meditation, but we cannot survive without human affection. - Dalai Lama<br>
Eminence without merit earns deference without esteem.<br>
I would rather spend four hours with my head stapled to the carpet<br>
Im totally comfortable with a state of eternal confusion. Its practically a lifestyle. -- scott adams<br>
If no one has written a doctoral thesis on the prevalence of imaginary conversations with Ben Franklin, someone really should -- s. adams<br>
The spirited horse, which will try to win the race of its own accord, will run even faster if encouraged. -- Ovid<br>
The ability to speak eloquently is not to be confused with having something to say<br>
If people believe in themselves, it's amazing what they can accomplish<br>
<br>
</p>
</body>
</html>


Tested in MSIE.

Saz
12-27-2006, 04:13 PM
<html>
<head>
<title> New Document </title>
<style>
#cover {
position: absolute;
width: 100%;
height: 100%;
z-index: 200;
}
</style>
</head>

<body>
<img src="blank.gif" id="cover">
<p>
If people believe in themselves, it's amazing what they can accomplish<br>
<br>
</p>
</body>
</html>


Tested in MSIE.

Many, many thanks for that NikkiH - it's definitely appreciated. This is now very much closer to being solved. As mentioned, is there any way of doing this only using css ? ie, if you were doing this for many 1,000's of pages and couldn't go into each individual page's html.

Any help appreciated.

Saz.

nikkiH
12-27-2006, 05:41 PM
The inline style can be externalized to a stylesheet, but unless you already had an ID or class name for your cover image, and it was already present in the html, this cannot be done.
The markup has to be in the page. You can't dynamically add markup to pages without help of scripting, which you said you didn't want.

That said, there are quite a few tools out there that can run through a ton of files and do a search/replace. Are you using any kind of templating system (GoLive, Dreamweaver, etc), IDE (Studio), or other generating tool? Are you using Linux (sed/grep) or Windows?
I had a bash script (cygwin for windows) that ran through about 50,000 files and did a similar search/replace.

Saz
12-27-2006, 07:32 PM
Many thanks for that NikkiH, your help is appreciated.

I can't do find/replace, as there's no consistency of any one thing to find.

I was thinking along the lines of the css below, where the image isn't actually in the html :

<html>
<head>

<style type="text/css">
body
{
background-image:
url('bg-image.jpg');
background-repeat: repeat
}
</style>

</head>

<body>
</body>
</html>

Any help much appreciated.

Saz.

nikkiH
12-27-2006, 08:01 PM
I bet I could replace with regular expressions. ;)
But Windows is quite lacking in basic things that I'm used to having, like sed/grep/awk.

There really isn't a way to do a foreground like that in a way that works with IE.
You can do it like this
http://www.spartanicus.utvinternet.ie/embedding_decorative_foreground_images_with_css.htm
But it is not MSIE compatible because IE doesn't like actual standards. :rolleyes:

All the ways I found playing around worked only in Firefox because they used newer CSS.

Saz
12-28-2006, 01:57 PM
I bet I could replace with regular expressions. ;)
But Windows is quite lacking in basic things that I'm used to having, like sed/grep/awk.

There really isn't a way to do a foreground like that in a way that works with IE.
You can do it like this
http://www.spartanicus.utvinternet.ie/embedding_decorative_foreground_images_with_css.htm
But it is not MSIE compatible because IE doesn't like actual standards. :rolleyes:

All the ways I found playing around worked only in Firefox because they used newer CSS.
Many thanks for that NikkiH - it's appreciated.

Do you know which one of those on the link you provided would be the one to use please ? I'm a little new to this ;-( Also, it would need to repeat all over the page.

The helps appreciated.

Saz.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum