Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Senior Member Seldimi's Avatar
    Join Date
    Dec 2002
    Location
    Kozani, Greece
    Posts
    488
    Member #
    409
    How can I add a background in one text field
    (Like it was in the previous version of WDF.net )
    Thank you in advance
    (It's important for a project, so I would like some help )
    - Webmaster's Planet . Greek Vortal For Webmasters ...
    - MyPortFolio - View My Creations

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    textarea i assume?

    Code:
    textarea {
      /* just color */
      background-color: #fff;
      /* an image in bg */
      background-image: url(img.gif);
    }
    non?
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    you can do it through css

    HTML Code:
    input {
      background: #AAA url(path/to/image.gif) no-repeat 0% 0%;
    }
    Let be break down the values.

    #AAA - This is the default color, its written in shorthand hex(#AAAAAA would yield the same results), you dont have to include this value if you dont want to specify a color.

    url(image.gif) - If you want to use an image, This will apply one to your background, again you have to include it if you dont want an image.

    If you do specify an image the next few values will give you control over it. By default any image will tile automatically. If you dont want it to repeat, or only repeat horozontally or vertically you can specify no-repeat, repeat-x or repeat-y repecfully. The last two values 0% 0% discribe where in your element you want this image to appear, you can use almost any unit of measure you wish(%, inches, em, pixles, etc..) even words, top, left, bottom, center, etc.. The first value will be the horozontal position, the second the vertical position. So by default, 0% 0% will position the image in the top left corner. The top right corner would be specified 100% 0%. If you dont specify an image you dont need any of these.

    The background property can be used in any element in your markup. And IIRC is supported in all major browsers, even IE.


  5. #4
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    karinne beat me to it.. :bandit:


  6. #5
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    yeah but didn't explain it tho i thought he'd already know about css and stuff... with a nick like webmasterplanet
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  7. #6
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Its a curse, I always overexplain things..


  8. #7
    Senior Member jlgosse's Avatar
    Join Date
    Jan 2004
    Location
    Newfoundland, Canada
    Posts
    1,037
    Member #
    4570
    Liked
    7 times
    Didn't explain enough. He only wants it for one input box, methinks. Not all of the textboxes.

    In that case, give the input a class/id, and define this in the stylesheet.
    Code:
    input.bg
    {
    background: #AAA url(path/to/image.gif) no-repeat 0% 0%;
    }
    That would do it for what you want, if I'm not mistaken.


  9. #8
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    What if this is the only input element he has in his document. Or what if he had a class of .bg on all of his input elements from check boxes to radio buttons to whatever and he wanted to hide it from IE? It all depends on how specific you want to make it.
    HTML Code:
    body>input[type="text"].bg {
    background: #AAA url(path/to/image.gif) no-repeat 0% 0%;
    }
    But yes i did forget to mention it. Your example would work if your imput field had a class of "bg". Or you can take it much farther then that. The W3C has a good resource on css selectors.

    Note: This selector does not work in IE.


  10. #9
    Senior Member Seldimi's Avatar
    Join Date
    Dec 2002
    Location
    Kozani, Greece
    Posts
    488
    Member #
    409
    Quote Originally Posted by karinne
    yeah but didn't explain it tho i thought he'd already know about css and stuff... with a nick like webmasterplanet
    Well, explaining is good for various reasons. One of them is that maybe I know this basics and a bit advance in CSS but a newbie may search how to do this. So the explanation would be very useful.
    - Webmaster's Planet . Greek Vortal For Webmasters ...
    - MyPortFolio - View My Creations


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:30 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com