If you want to repeat the background image on y-axis and you want to change the height of the div dynamically where the background image has to repeat itself, you can do it using JavaScript. And now that you came here, it is a real simple job.
Theoretically what you are going to do is,
1.Assign the div, whose height you are looking to change dynamically, an ID.
2.When the document is loaded, get the height occupied by that div
3.Assign that height to the CSS rule where background repeat is mentioned.
As simple as that! Heres the working code.
<head>
<style type="text/css">
#content
{
width: 450px;
background-image: url(images/line_v.gif);
background-repeat: repeat-y;
background-position: right center;
min-height: 10px;
float: left;
}
</style>
</head>
<body>
<div id="content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper turpis in
tortor interdum sed mattis lectus mollis. Pellentesque laoreet quam et mauris feugiat
sit amet eleifend turpis imperdiet. Praesent condimentum libero vitae massa imperdiet
pellentesque. Vestibulum et risus dolor, ac tincidunt velit. Maecenas lobortis diam
tellus. Suspendisse auctor, velit ut imperdiet semper, erat orci pharetra tortor,
venenatis vulputate metus eros ut felis. Cras ullamcorper odio sed felis ornare
ultricies. Phasellus porta adipiscing aliquet. Aenean ligula tellus, blandit a pulvinar
in, fermentum a erat. Sed arcu nisl, porta eu vestibulum at, luctus sed tellus.
Aenean eget quam justo, quis ultricies ante. Vivamus tempor sollicitudin augue ut
rhoncus. Sed odio mauris, imperdiet ut elementum vitae, dapibus at quam. Nullam
in aliquam sem. Fusce consectetur laoreet elit, non consequat nunc tempus nec. Cras
at enim ipsum. Praesent ipsum purus, tempus non sagittis volutpat, fringilla eget
mi. Maecenas sed elit est. Morbi facilisis purus eget nunc tincidunt iaculis mattis
quam pellentesque. Sed tortor leo, laoreet sit amet mattis a, fermentum in ligula.
Sed tempor lacus a lorem fermentum fermentum semper nunc sagittis. Vivamus et est
porta purus mollis cursus eget in ante. Sed lacinia, diam in tempor suscipit, turpis
enim posuere turpis, sit amet vestibulum quam nulla id elit. Vivamus ultricies tempus
mi, non consequat velit mollis id. Curabitur vehicula, turpis id tempor condimentum,
sem nulla molestie enim, vel commodo metus ipsum non nisi. Aliquam erat volutpat.
</div>
<script type="text/javascript">
var divHeight;
var textobj = document.getElementById("content");
if (textobj.offsetHeight) { divHeight = textobj.offsetHeight;}
else if (textobj.style.pixelHeight) { divHeight = textobj.offsetHeight; }
changecss('#content', 'min-height', divHeight + "px");
function changecss(theClass, element, value) {
var cssRules;
var added = false;
for (var S = 0; S < document.styleSheets.length; S++) {
if (document.styleSheets[S]['rules']) {
cssRules = 'rules';
} else if (document.styleSheets[S]['cssRules']) {
cssRules = 'cssRules';
} else {
//no rules found... browser unknown
}
for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
if (document.styleSheets[S][cssRules][R].style[element]) {
document.styleSheets[S][cssRules][R].style[element] = value;
added = true;
break;
}
}
}
if (!added) {
try {
document.styleSheets[S].insertRule(theClass + ' { ' + element + ': ' + value + '; }', document.styleSheets[S][cssRules].length);
} catch (err) {
try { document.styleSheets[S].addRule(theClass, element + ': ' + value + ';'); } catch (err) { }
}
}
}
}
</script>
</body>
</html>
Here's the line_v.gif,
. Place it in images folder and give it a go to see how it works.Make sure the javascript is at the end of document. Else it would would throw "object required" error.
Happy coding!
