SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,416
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Repeating images in the foreground

    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 appreciated.

    Dez.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Place the image as a background image on an element in the foreground

  3. #3
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,416
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Place the image as a background image on an element in the foreground
    Many thanks for that Mark - the input is appreciated.

    Any ideas how that code would look please ? Bearing in mind that the actual image itself wouldn't be mentioned in the html.

    Any help very much appreciated.

    Dez.

  4. #4
    SitePoint Addict StuckRUs's Avatar
    Join Date
    Jul 2006
    Location
    UK
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    create a new div, apply the background then bring the div to the front using z-indexes.
    SMILE! everyone will wonder what you're up to.
    Site - under construction - again

  5. #5
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,416
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by StuckRUs View Post
    create a new div, apply the background then bring the div to the front using z-indexes.
    Many thanks StuckRUs - I know how to do div's but not the other part - I'll Google this some more - but if anyone can help with the complete code in the meantime, that would be great.

    All the best.

    Dez.

  6. #6
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this
    Code:
    #foreground {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:url(yourimage.gif);
    z-index:1;
    }
    HTML Code:
    <body>
    <div id="foreground">
    </div>
    You are going to have problems if you have links on the page though...
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  7. #7
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe this treads upon the most recent CSS challenge's answers - as the 'only using CSS' to me, means you cannot ADD a div to the html, right? If you cannot modify the html side of things, that makes it tougher.

    http://www.sitepoint.com/forums/show...2&postcount=18

    my answer with the HTC would be a start in the right direction methinks, just use the background version, set to 100&#37; width, 100% height and 0,0. (I think that will work...)

    I'll play with it, see what I come up with.

  8. #8
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this, I opened up the function to work on any tag, just change what the CSS targets... It also uses :after instead of :before, that way you don't have to mess around with z-indexes to put it atop any content inside the DIV. (which I think is the point of what's being asked)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Deathshadow 2</title>
    <style type="text/css">
    
    * {
        margin:0;
        padding:0;
    }
    
    p {
        margin:50px auto;
        width:50&#37;;
        height:200px;
        border:1px solid red;
        position:relative;
    }
    
    p:after {
        display:block;
        position:absolute; 
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        content: " ";
        background:url(arrowpoint.gif);
    }
    
    </style>
    
    <!--[if IE]>
    <style type="text/css" media="screen">
    body {
        behavior:url(parse_p.htc);
    } 
    </style>
    <![endif] -->
    
    </head>
    <body>
    <p>Test</p>
    </body>
    </html>
    and the parse_p.htc to make IE 6&7 work
    Code:
    <attach event="ondocumentready" handler="parseP" />
    <script>
    function parseP() {
    	var sheets=window.document.styleSheets;
    	for (var t=0; t<sheets.length; t++) {
    		var rules=sheets[t].rules;
    		for (var n=0; n<rules.length; n++) {
    			var rule=rules[n];
    			tst=rule.selectorText.toLowerCase();
    			if (tst.match(":unknown")) {
    				newname='.'+tst.replace(":unknown","_before"); 
    				sheets[t].addRule(newname,rule.style.cssText);
    			}
    		}
    	}
    
    	p_list=window.document.getElementsByTagName('p'); 
    	for (t=0; t<p_list.length; t++) {
    		p_list[t].insertAdjacentHTML("beforeEnd",'<span class="p_before"></span>');
    	}
    }
    </script>
    To make it work with some other tag, just change the css, then in the .htc replace the p_before class and the getElementsByTagName with whatever tagname you end up using.

  9. #9
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suspect Dez is able to add a DIV to the HTML otherwise she/he would have mentioned it after StuckRUs post. But nice solution none the less!

  10. #10
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is showing me how much more there is to learn about CSS. Great stuff.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  11. #11
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,416
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow View Post
    Try this, I opened up the function to work on any tag, just change what the CSS targets... It also uses :after instead of :before, that way you don't have to mess around with z-indexes to put it atop any content inside the DIV. (which I think is the point of what's being asked)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Deathshadow 2</title>
    <style type="text/css">
    
    * {
        margin:0;
        padding:0;
    }
    
    p {
        margin:50px auto;
        width:50%;
        height:200px;
        border:1px solid red;
        position:relative;
    }
    
    p:after {
        display:block;
        position:absolute; 
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        content: " ";
        background:url(arrowpoint.gif);
    }
    
    </style>
    
    <!--[if IE]>
    <style type="text/css" media="screen">
    body {
        behavior:url(parse_p.htc);
    } 
    </style>
    <![endif] -->
    
    </head>
    <body>
    <p>Test</p>
    </body>
    </html>
    and the parse_p.htc to make IE 6&7 work
    Code:
    <attach event="ondocumentready" handler="parseP" />
    <script>
    function parseP() {
    	var sheets=window.document.styleSheets;
    	for (var t=0; t<sheets.length; t++) {
    		var rules=sheets[t].rules;
    		for (var n=0; n<rules.length; n++) {
    			var rule=rules[n];
    			tst=rule.selectorText.toLowerCase();
    			if (tst.match(":unknown")) {
    				newname='.'+tst.replace(":unknown","_before"); 
    				sheets[t].addRule(newname,rule.style.cssText);
    			}
    		}
    	}
    
    	p_list=window.document.getElementsByTagName('p'); 
    	for (t=0; t<p_list.length; t++) {
    		p_list[t].insertAdjacentHTML("beforeEnd",'<span class="p_before"></span>');
    	}
    }
    </script>
    To make it work with some other tag, just change the css, then in the .htc replace the p_before class and the getElementsByTagName with whatever tagname you end up using.
    Many, many thanks to MarkBrown4, StuckRUs, Rob_D and in particular DeathShadow for all the help - it's appreciated.

    The next problem, as Rob rightly pointed out, is that it's a problem when on a page with links on. Anyone know if there's a way of just applying it to where the images are on the pages please ? Again, without doing anything to the HTML of the 100's of pages.

    It's a bit of a challenge, but the help is genuinely appreciated.

    Dez.


Bookmarks

Posting Permissions

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