Being able to write text over an image?

Discussion in 'CSS' started by AngelaR, Nov 9, 2007.

0
  1. #1
    Hi there,

    I am new to the whole CSS thing, and I love what the possibilities bring.

    I want to use an image as simple background divider (lets say a file folder image) but I would like to be able to write over top of it. What do I need to add to my CSS file to achieve this?

    I am very confused actually by the thought of doing it, I am sure it is an easy enough task but could someone help me through it? :D
     
    AngelaR, Nov 9, 2007 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    If the element holding the text (for instance, a <p>) has a background image set, OR if the box that the <p> is in has a background image set, then it will be just that: a background image. Text will sit naturally on top.

    background-color: default is transparent, or you can add a colour.
    background-image: default is none.
    background-repeat: default is repeat (it will tile unless you say no-repeat)
    background-position: I think the default is 0 0 (top left).

    You can group these together too:

    #somediv {
    background: #fff url(/images/foomanchu.gif) 0 0 no-repeat;
    }

    This makes the background (where there isn't image) white, adds the background image foomanchu.gif, sets the image's top left corner to the top left corner of the div (or whatever you want to stick it in), and will not tile.

    Google "CSS background" and you'll find plenty of neat tricks you can do with backgrounds.
     
    Stomme poes, Nov 9, 2007 IP
    AngelaR likes this.
  3. armatik

    armatik Peon

    Messages:
    27
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    In addition to Stomme poes' code, you could put something like this, following the example in your post:

    #folder_icon {
background:#fff url(icons/folder.jpg) 0 0 no-repeat;
width:100px;
}
#folder_icon span {
padding-left:25px;
}
    Code (markup):
    Say, for instance, the image is actually 20 pixels wide, and you've set up your HTML as so:

    <div id="folder_icon"><span>Click the folder!</span></div>
    HTML:
    You'd make it 100 pixels wide so that you can write all the stuff you want (it doesn't have to be 100 pixels, just however long you want it). Then you make the text padding from the left (or if you want your image to be on the right and pad from the right, just adjust settings accordingly, such as putting top right in the background: part of the CSS), however much you want it, and you're set!
     
    armatik, Nov 9, 2007 IP