SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Disappearing when Adding Fixed Property

    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.

    Code CSS:
    .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;
    }
    Code HTML:
    <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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's showing . It's just being covered up. Take your code. Add body{height:1000px;} so scrollbars appear.
    Code:
    <!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.
    Code:
    <!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?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    background_image.gif

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    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. #6
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    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. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    I hate to say it but this idea is a mess.
    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.

    Quote Originally Posted by dresden_phoenix View Post
    I also think "your review" should be a heading.
    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.


Bookmarks

Posting Permissions

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