Advanced Search

Results 1 to 6 of 6

Thread: background repeat only 20%?

  1. #1
    Join Date
    Oct 2009
    Location
    New York
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default background repeat only 20%?

    Hey, I've got a question for you guys. Is it possible to do a background repeat only 20 percent, or 9em or whatever, so that the background doesn't go along the entire page.

  2. #2
    Join Date
    Jun 2008
    Posts
    114
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    add a span or div tag.

    insert background inside it and give div tag a specific width.

    in this way the background will not repeat outside of width.

    if you will give background to body then it will repeat full.

    vineet

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,156
    Thanks
    262
    Thanked 690 Times in 678 Posts

    Default

    Or just use a background image that does not repeat: make an image, for example 200px tall, then repeat it only once and the rest will be empty. Of course that won't scale with the page, but I suppose you could try scaling an image if you'd like.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    I think, at least for an effect like this that would appear like it was the background of the body, some javascript would be required, ex:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #bgcontainer {
    	margin-left: 20%;
    	background-image: url(http://i19.tinypic.com/2mdl82c.jpg);
    	position: fixed;
    }
    #bodycontainer {
    	position: relative;
    }
    </style>
    <script type="text/javascript">
    (function(){
    	var getDims = (function(){
    		return window.innerHeight? function(){return [innerHeight, innerWidth];} :
    		function(){return [document.documentElement.clientHeight, document.documentElement.clientWidth];}
    	})();
    	onload = onresize = function(){
    		var bg = document.getElementById('bgcontainer'), dim = getDims();
    		bg.style.height = dim[0] + 'px';
    		bg.style.width = dim[1] + 'px';
    	}
    })();
    </script>
    </head>
    <body>
    <div id="bgcontainer"></div>
    <div id="bodycontainer">
    Some content: Those accusing aces surprisedly bow to his dizzy submarines. Their admonishing swine aesthetically suffer his bittersweet tarpaulins. Their congruent acres abhorrently acknowledge her funny tables. Their horrifying swans altruistically squeak from a curious swallow. Those disgruntled animals therapeutically break our affirming aardvarks. Their cultivated tasks terrifiedly sigh over their daring students. That accommodating tetrahedron ascetically bumps his boiling thieves. Her frozen taxonomies already bubble over those frowning tautologies. Her damp aristocrats tersely admire the frustrating things. His breezy thrushes alternatively sin for her brief artists.
    </div>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2009
    Location
    New York
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John, you are the man. That is very interesting though. I would've thought there'd be a straight CSS solution. Listen, I have got to get up on my Javascript. Can you recommend any good tutorials? I think you helped me with a question a few days ago. Thanks!

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    I've heard this one is good:

    http://www.howtocreate.co.uk/tutorials/javascript/

    But I was pretty much done with tutorials before I became aware of it, so I cannot vouch for it personally. That's not to say I won't get around to looking it over at some point. At a quick look, it appears good, not great. I have high standards.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •