Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11

Thread: text area css

  1. #1
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

    text area css

    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.

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

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    textarea {
    
    border-color:#000000; color:#3300CC; cursor:hand;
    background-image:url(images/catfish.gif);
    background-repeat:no-repeat;
    }

  • #3
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    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

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    i believe it depends on the image width and height, like expanding it like so

    Code:
    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!

  • Users who have thanked jcdevelopment for this post:

    masterofollies (02-28-2008)

  • #5
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    For the height, width is it possible to do like 100% in both, so that it doesn't go over the text area size?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You can't resize a background image at least not yet.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    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.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm attach the image you are trying to use.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    How is this?
    Code:
    <!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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •