SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    <img src="... as a background image?

    an image that is content, so should be there for non css users, i want to have as a background image for viewers using css. is there a way to make an <img src="... type of image a background image so that something else i've got can go over it, or should i use display:none for the image in the css and put the same image in as a background image in the normal css way?

    also if the answer is use display:none for the img then put the image in as a background image using css, if there's nothing suitable in the html now to use to attach the background css command to what can i put into the html that would allow me to do that -- just an empty div or something? what would be best for that?

    thanks.

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    I would use the empty division method and set it as a background image for that division.

    Then you can type text over it and it won't be an empty division anymore

    Hope it helps.

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    and have <img src="... in the html and use display:none on it? bearing in mind the image is important to the content. yes i suppose that's how it should be done if there's no way to make a image that's in the html a background image. ok thanks.

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Well, if the image is important to the content. I would include it in the html with:
    Code:
    <img src="" width="" height=" alt="" />
    and use CSS to position it within the site as needed.

    Keep in mind I am not sure what exactly you are attempting.

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    i'm trying to get an image that is important to content as a background image so stuff goes over it, so the question is should the <img src be turned off and the image placed as a background in the css, or should (can it even) the css turn the <img src into a background image somehow?

    you know how stuff goes over a background image quite happily -- that's what i want but the image is part of the content so it can simply be an image applied using background in css because then non css viewers would never see the image. if it's possible to turn a <img src into a background image how?

    thanks

  6. #6
    SitePoint Guru
    Join Date
    Aug 2003
    Location
    CT
    Posts
    643
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^ Right.

    If the image IS content (say, a graph or a picture of the author), not just to make things pretty, it should be included in regular <img /> tags.

    If you want it as a background image for CSS-capabale user agents, perhaps, then, this image is not CONTENT, but rather, STYLE, and should only be included as a background image of an element.
    My Blog: SkeyMedia.com

  7. #7
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    having text over an image does not make it not content. that's what i've got -- an image that's content that i need to put some text over.

    the only way i know how to do this, which is what i'll use but i was wondering if there was a better way, is to include the image in the html but turn it off with display:none and put the image in as a background image in the css. or is there a way to make an image that's in html like a background image?

  8. #8
    SitePoint Guru
    Join Date
    Aug 2003
    Location
    CT
    Posts
    643
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like you're trying to caption an image like this:


    Code:
    ------------------------------
    |
    |
    |
    |
    | text over image here... 
    |
    |--------------------------------
    if that's the case, this is the markup i would use.


    Code:
    <div class="imagewrapper">
    <img src=  . . .  />
    <div class="caption">This is some text</div>
    <br style="clear:left;" />
    </div>
    With some neat CSS, you can position the caption as you wish:

    Code:
    div.caption { margin-top: -25px; z-index: 999; }
    My Blog: SkeyMedia.com

  9. #9
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    > Sounds like you're trying to caption an image..

    yes sort of. i will give your suggestion a go -- thanks very much.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can position any element on top of any other element by adjusting the z-index correctly and placing the elemnts so that they overlap. It doesn't matter if they are foregound or background images as the element can be manipulated anyway.

    The elements need to have a position defined so that z-index takes effect (position:relative or position absolute depending on situation).

    You would set the parent to have position:relative and then the text could be absolutely placed over the parent without problem.

    e.g.
    http://www.pmob.co.uk/temp/overlay.htm

    Alternatively you could drag the text over the image with negative margins as briansol has done above.

  11. #11
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    right, thanks. i will have a play with those -- see what works best. thanks.


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
  •