SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background-images will this work for all or most browsers?

    Hi there, its been a while since I used css and html and I'm kind of rusty but I guess I'll start and use an example...

    Code:
    div#header { 
    	width: 100%; 
    	margin: 0; 
    	padding: 80px 0 70px; 
    	position: relative; 
            background-image: url(header_bottom.png), url(header_top.png), url(header_background.png);
            background-repeat: repeat-x, repeat-x, repeat;
            background-position: bottom left, top center, top left;
    }
    Will this work on most browsers?

    Also, I wanted to know, I have an image at the top of my webpage that says "online portfolio of so so, etc.." is it good practice to wrap the text of that image in a h1 tag, then could I use like -9999 text indent on it or will just the alt attribute text be enough?

    Thanks for any help.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jlisec01 View Post
    Hi there, its been a while since I used css and html and I'm kind of rusty but I guess I'll start and use an example...

    Code:
    div#header { 
    	width: 100%; 
    	margin: 0; 
    	padding: 80px 0 70px; 
    	position: relative; 
            background-image: url(header_bottom.png), url(header_top.png), url(header_background.png);
            background-repeat: repeat-x, repeat-x, repeat;
            background-position: bottom left, top center, top left;
    }
    Will this work on most browsers?
    Multiple background images are supported from IE9+. You can check out support here and here. You will need some sort of fall-back for older bowers or if the image is just decoration then offer a simpler alternative.

    Also, I wanted to know, I have an image at the top of my webpage that says "online portfolio of so so, etc.." is it good practice to wrap the text of that image in a h1 tag, then could I use like -9999 text indent on it or will just the alt attribute text be enough?
    Use the Gilder Levin image replacement for best accessibility and SEO. It doesn't work on transparent images though so isn't suitable for everything. If the image is transparent then an actual html image with alt and tiltle attribute text is not that bad an option anyway when the image is really content and not decoration.


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
  •