Background Disappearing when Adding Fixed Property

HTML & CSS
1

I’m styling a textarea and noticed that when I scrolled in IE from large amounts of text, the background stayed at the top. To correct, I added the fixed property. Once added though, the background image disappeared in both IE and FF. Firefox worked fine without the fixed property. See the code below.

.text-box textarea {
    float: left;
    width: 420px;
    height: 130px;
    margin-bottom: 15px;
    padding: 10px;
    border: 0;
    font: 14px Arial,Helvetica,sans-serif;
    background: url(../images/bg-textarea.gif) no-repeat fixed;
}


<div class="text-box">
<p class="review">Your Review</p>
<textarea id="ctl00_ContentPlaceHolderForm_txtReviewComment" title="Enter text for your review." accesskey="c" cols="20" rows="2" name="ctl00$ContentPlaceHolderForm$txtReviewComment"></textarea>
</div>
2

It’s showing :). It’s just being covered up. Take your code. Add body{height:1000px;} so scrollbars appear.

<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>to_sitepoint</title>
<style type="text/css">
body{height:1000px;}
.text-box .textarea {
    float: left;
    width: 420px;
    height: 130px;
    margin-bottom: 15px;
    padding: 10px;
    border: 0;
    font: 14px Arial,Helvetica,sans-serif;
    background: url("http://ryanreese.us/images/price.png") no-repeat fixed;
}
</style>
</head>
<body>
<div class="text-box">
<p class="review">Your Review</p>
<div class="textarea">asdf<br>asdf</div>
</div>
</body>
</html>

Now start scrolling down. It’s appearing. Just covered up. Just add in some coordinates.

<!doctype html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>to_sitepoint</title>
<style type="text/css">
body{height:1000px;}
.text-box .textarea {
    float: left;
    width: 420px;
    height: 130px;
    margin-bottom: 15px;
    padding: 10px;
    border: 0;
    font: 14px Arial,Helvetica,sans-serif;
    background: url("http://ryanreese.us/images/price.png") no-repeat fixed 20px 50px;
}
</style>
</head>
<body>
<div class="text-box">
<p class="review">Your Review</p>
<div class="textarea">asdf<br>asdf</div>
</div>
</body>
</html>

There are a few solutions. That’s one. I used an image from my website to show this issue. So it’s not exactly your code :). Why do you need it to be fixed though?

3

My pages will all be different lengths, I wouldn’t want to change the body attributes. Here’s an image of what I’m dealing with. The fixed attribute would be logical because it’s a form field. If the user types beyond the box, scrolling / expanding the area would happen.

4

Well background-attachment doesn’t relaly work the way you think it does. When applied to elements other than the <body>, it makes it fixed in regadrs to the viewport. Not the element itself. You’ll have to go with another effect.

I could give you a solution which gives you want you want, and uses opacity to make the image seeable. The downsides are that hte text/image would both be slightly…grayish. Not quite as fully dark as you’d probably hope. Still readable (to an extent).

5

I hate to say it but this idea is a mess.
Why are you using TEXTAREA? It’s not a user input or am I mistaken? Is this part of a form? ( I also think “your review” should be a heading).

Assuming this is a form why not just give your TEXAREA a fixed height and style the container div with border/border-radius instead of using a bg?

6

Yes, textarea is part of a form. This is an application, so I’m not terribly worried about headings. The border radius suggestion is one I didn’t use for lack of support, but a good recommendation. I ended up going with a regular border to eliminate issues, I’ve got to move on.

7

if the thing is fixed (PX) height then the solution could be as s simple as making the container DIV FIXED HEIGHT in PXs with FIXED PADDING in PXs and giving the texarea the same TOTAL ( remember you may add padding to it for aesthetic reasons) as the height alone of the container div. Place the BG image in the container DIV and give it a BG position of: center center.

8

Agreed, though my “application” sense is tingling; aka taking something simple and turning it into a javascript train wreck of useless garbage… the type of thing that’s been pissing me off on every website I encounter it.

Funny, since this looks like part of a form to me, HEADING was not the tag that came to mind… LABEL on the other hand…

Good rule of thumb though, ‘fixed’ sucks. ALWAYS. Should as a rule of thumb be avoided as broken needlessly complex garbage that has no business on a website.

That said, yeah, border-radius and I’d probably put it on the wrapper, NOT the textarea. IE8/lower doesn’t get it, OH WELL.