View Full Version : 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.
vineet
12-15-2009, 08:00 AM
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
djr33
12-15-2009, 09:20 AM
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.
jscheuer1
12-15-2009, 01:50 PM
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:
<!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, 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!:D
jscheuer1
12-15-2009, 02:16 PM
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.
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.