Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Repeating images

    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.

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    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.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nikkiH View Post
    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.
    Many thanks Nikki - any ideas on how the code would look for that please ?

    Any help appreciated.

    Saz.

  • #4
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <style type="text/css">
    body
    {
    background-image:
    url(yourimage.jpg);
    background-repeat:
    repeat
    }
    </style>
    ALWAYS remember to validate your code

  • #5
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by codingmasta View Post
    Code:
    <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.

  • #6
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Code:
    <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>
    I’m totally comfortable with a state of eternal confusion. It’s 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.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #7
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nikkiH View Post
    Code:
    <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.
    Last edited by Saz; 12-27-2006 at 06:05 PM. Reason: Typo

  • #8
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    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.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #9
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    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.i...s_with_css.htm
    But it is not MSIE compatible because IE doesn't like actual standards.

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

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #11
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nikkiH View Post
    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.i...s_with_css.htm
    But it is not MSIE compatible because IE doesn't like actual standards.

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •