background repeat only 20%?

**rekk** · 12-15-2009, 01:35 AM

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:

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>

**rekk** · 12-15-2009, 02:03 PM

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!

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

Thread: background repeat only 20%?

Thread Tools

Search Thread

background repeat only 20%?

Bookmarks

Bookmarks

Posting Permissions