Bacgeound imagea in a textarea [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

View Full Version : Bacgeound imagea in a textarea

Beauford

07-24-2008, 09:04 PM

Small problem. I want to have a background image in a text area be static so that the picture is flush on the bottom of the textarea and does not move when you scroll.

Sounds simple so far and I sort of got that working. The problem is that the picture is also static to the whole webpage, so when I use the scroll bars on the main page it totally messes things up.

Is there a way to have it static just to the text area. here is my code:

textarea.pic-ie { border: 1px inset #E2B6B9; background-image: url(http://mysite.com/images/textarea-ie.gif); background-attachment: fixed; }

<textarea name="event" cols="38" rows="6" class="pic-ie"></textarea>

Also, if I add background-repeat: no-repeat to the css above, the picture does not show up at all.

Thanks

athomas

07-24-2008, 09:37 PM

Google is your friend, this was the 2nd link.
http://www.pageresource.com/html/fixedbg.htm

JoeyDaly

07-24-2008, 09:41 PM

Try adding the following:

background-repeat: no-repeat;
background-position: bottom center;
background-attachment: scroll;

You may need to adjust the positioning to what you want.

I've done this before as seen on: http://www.rew.com.au/contact.cfm

My CSS:

.inputLarge {
background:#FFFFFF url(inputLarge.png) no-repeat scroll left top;
border:1px solid #C0C0C0;
font-family:Verdana;
font-size:14px;
height:118px;
padding:3px;
width:395px;
}

coothead

07-25-2008, 05:19 AM

Hi there Beauford,

your problem is only with IE, of course. :supereek:
Firefox, Opera and Safari have no trouble at all with a background image. :agree:
Therefore you need to take a different approach to the problem that will satisfy all browsers. :agree:

Here is an example...

<!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=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#ta_container {
width:398px;
border:1px inset #e2b6b9;
background-image:url(http://mysite.orange.co.uk/azygous/images/blood.jpg);
}
#ta_container textarea {
width:398px;
height:124px;
border:0;
background-color:transparent;
color:#fff;
overflow:auto;
}
</style>

</head>
<body>

<div id="ta_container">
<textarea cols="1" rows="1">
This is a textarea with a fixed background image that works in IE, Firefox, Opera and Safari browsers.
</textarea>
</div>

</body>
</html>

Beauford

07-26-2008, 09:32 PM

Thanks to all that replied, I will check things out and let you know. By the way, it does the same on both IE and FF.

athomas:

FYI
http://www.yourhtmlsource.com/stylesheets/cssbackgrounds.html

You can also tamper with that long-established rule that your background always moves with your page when you scroll around. You had an IE-only tag in recent times that allowed you to achieve this (bgproperties="fixed"), but now this is part of the CSS standards so you should use this instead. Your property for this one is background-attachment.

body {background-image: url(../images/tile.gif); background-attachment: fixed; }

Beauford

07-26-2008, 10:48 PM

I'm just about ready to toss this whole thing and take up needle point, aside from the textarea thing, trying to get a simple bloody table to align up the same way in both IE and FF is turning into a two week marathon.

Quick example.

<table width="260">
<tr>
<td align="left" width="240"><input type="text" name="name" value="" size="20"></td>
<td align="right" width="20">There is a 10x10 pic here</td>
</tr>
</table>

Problem: Even though the size in the input is 20, on the screen FF is about 4px smaller than in IE and the small pic is a little bit under the input.

As for the textarea thing, the closest I got is joeydaly's answer. It works perfect in FF, but not in IE - In IE it still scrolls.

coothead: Could not get a picture to display at all.

coothead

07-27-2008, 02:59 AM

Hi there Beauford,
coothead: Could not get a picture to display at all.
Then you obviously do not know how to use code that is presented to you. :disagree:
The link that you provided...
http://mysite.com/images/textarea-ie.gif
...does not provide us with an image but this instead...
Page Not Found - 404 Error Page
Let's get back to the textarea problem....
As for the textarea thing, the closest I got is joeydaly's answer. It works perfect in FF, but not in IE - In IE it still scrolls.
As I said the solution that I provided satisfies all browsers. :agree:
As you do not seem to have the ability to adapt code, I will have to make things easy for you and provide a link to an example...
http://mysite.orange.co.uk/azygous/ta_bg.html
Now tell me that the backgound-image scrolls in IE. :rolleyes:

Beauford

07-27-2008, 11:40 AM

I will find another solution. Since I don't have the ability to adapt code, this must be way over my head, but thanks anyway.

http://mysite.com/images/textarea-ie.gif is not live yet - only on my PC.

coothead

07-27-2008, 12:25 PM

Hi there Beauford,

We are here to try and help you. :agree:

Instead of saying that code given to you does not work and then thinking that it must be way above your head,
post you're attempt at code adaption and also the image to be used. We will then be able to correct it for you.

Don't just give up at the first hurdle. :disagree:

My example shows that it does work for all browsers.
With a little patience it can work for you also. ;)

Beauford

08-04-2008, 02:02 PM