SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    If you are setting an image as a background?

    Lets say you want to set your image as part of the background, IE,

    <div id="logo" name="logo></div> but you have this in your css


    Code:
    #logo {
     background-attachment: fixed;
     background-image: url(white3.jpg);
     background-repeat: no-repeat;
     background-position: center top;
     height: 168px;
     width: 700px;
    }
    If you want to use that image as part of your h1 tags, how do you do it if its embedded like that? do you do

    <h1><div id="logo" name="logo"></div></h1> ????

    Then to add to that, normally for the h1, if you are using an image, you want to include ALT attributes. How do you do that if its in your stylesheet?

    Thanks

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

    Background fixed means that the image is fixed from the viewport at all times and not from any container. The image will always be in the same place no matter what.

    In order for your image to show through a container you will need to ensure that the container is positioned over a portion of the image so that it shows through. The container will need to have the background image defined in its style. You can either style the h1 tag directly and place the image in the style or you can add a class to it with the image in the style.

    You can place the same background image in several containers but only the portion of the image that is visible will show through on each container.

    However iE doesn't support this function and I'm not sure its what you wanted anyway.

    Background: scroll is probably what you want. You can place the image directly in a container and that image will show wherever the container is. If the container is moved then the image will move.

    If you want the image as a background to your h1 tag then just define the h1 style directly. e.g.
    h1 {background-image: url(image.gif):}

    You will have to define widths and height in which the image can show. Unfortunately you can't use alt tags on background images so they shouldn't really be used for important information but more for decoration. (You could however give a title tag to your heading <h1 title="heading etc.."></h1>)

    If you also define a background colour for the element then the background will show if the image is missing etc.

    Paul

  3. #3
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.

    I probably misled you in my post on what I was asking about. The second half of your post seemed to hit on it.

    I know whether or not I define something for h1 or not won't make an impact on my personal site, BUT, generally speaking, in terms of Search Engine Optimization, is it better to

    1. Just use the standard IMG tag and include an Alt, all while in the <h1> tag, or..

    2. Do the background thing, and just include the TITLE like you had said. Does one get grabbed before the other from a search engine?

    Thanks

  4. #4
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If your image is part of the page content use an <img> tag with an appropriate value for its "alt" attribute (and possibly its "title" and "longdesc" attributes as well, if appropriate.) If the image is just a decorative background image, then set it in your stylesheet.

  5. #5


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
  •