...

View Full Version : text area css



masterofollies
02-28-2008, 04:39 PM
Can anyone help with this problem?

I want to create a transparent image to be the background of my text area. Which I get to work fine, but if it's a larger text area there is multiple images. I just want one to be there. What kind of coding can I use to have it where I have a small graphic, for the small text areas, and when I have a larger one, the graphic expands and enlarges to the text area? Here is my coding.


textarea {

border-color:#000000; color:#3300CC; cursor:hand;
background-image:url(images/catfish.gif);

}

jcdevelopment
02-28-2008, 04:43 PM
textarea {

border-color:#000000; color:#3300CC; cursor:hand;
background-image:url(images/catfish.gif);
background-repeat:no-repeat;
}

masterofollies
02-28-2008, 05:01 PM
Ok so the no repeat works, thank you for that. But how can the graphic default to the full size of the text area?

Like if the text area is 300 long, 200 tall
your graphic is 200 long, 100 tall
the graphic would explain to 300 long, 200 tall

jcdevelopment
02-28-2008, 05:19 PM
i believe it depends on the image width and height, like expanding it like so



textarea {
height:...;
width:....;
border-color:#000000; color:#3300CC; cursor:hand;
background-image:url(images/catfish.gif);
background-repeat:no-repeat;
}


just create the image size that you need to expand it, im not sure of another way!!

good luck!

masterofollies
02-28-2008, 05:29 PM
For the height, width is it possible to do like 100% in both, so that it doesn't go over the text area size?

_Aerospace_Eng_
02-28-2008, 05:33 PM
You can't resize a background image at least not yet.

masterofollies
02-28-2008, 05:43 PM
Dang, that ruins my plans. You'd think at least javascript could help, but I guess I will have to go around making all of the text boxes the same size.

_Aerospace_Eng_
02-28-2008, 05:45 PM
Hmm attach the image you are trying to use.

masterofollies
02-28-2008, 06:58 PM
http://www.rodgame.org/images/textarea.jpg

_Aerospace_Eng_
02-28-2008, 07:24 PM
How is this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.textareahold {
position:relative;
background:#D0AD35;
}
.bg {
position:absolute;
top:50&#37;;
left:50%;
z-index:0;
}
textarea {
position:relative;
z-index:1;
background:none;
border:1px solid #000;
}
</style>
<script type="text/javascript">
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
function setImage()
{
var containers = document.getElementsByClassName('textareahold');
for(var i = 0; i < containers.length; i++)
{
theight = containers[i].getElementsByTagName('textarea')[0].offsetHeight;
twidth = containers[i].getElementsByTagName('textarea')[0].offsetWidth;
containers[i].style.width = twidth + 'px';
if(containers[i].getElementsByTagName('img')[0].className == 'bg')
{
containers[i].getElementsByTagName('img')[0].setAttribute('height',theight);
iwidth = containers[i].getElementsByTagName('img')[0].offsetWidth;
tmargin = (-1) * (theight / 2);
lmargin = (-1) * (iwidth / 2);
containers[i].getElementsByTagName('img')[0].style.marginLeft = lmargin + 'px';
containers[i].getElementsByTagName('img')[0].style.marginTop = tmargin + 'px';
}
}
}
window.onload = setImage;
</script>
</head>
<body>
<form>
<div class="textareahold"><img class="bg" src="textarea.jpg" alt="">
<textarea rows="5" cols="30">This is a textarea</textarea>
</div>
<div class="textareahold"><img class="bg" src="textarea.jpg" alt="">
<textarea rows="10" cols="60">This is a textarea</textarea>
</div>
<div class="textareahold"><img class="bg" src="textarea.jpg" alt="">
<textarea rows="15" cols="100">This is a textarea</textarea>
</div>
</form>
</body>
</html>

I can get the image to fit the size of the textarea but then it gets really pixelated.

masterofollies
02-29-2008, 03:40 AM
Wow thats alot of coding for this. I will try it out, or do you think it's best to resize them all to one size?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum