www.webdeveloper.com
Results 1 to 4 of 4

Thread: Div background-Image Not Showing Online

  1. #1
    Join Date
    Mar 2007
    Posts
    156

    Question Div background-Image Not Showing Online

    Hi Guys,
    Im hoping someone can advise.

    I have a div and want it to display an image as the background, in my editor I can see its OK with some inline CSS but when i sent the page and image to the server the image does not display?? I can see the CSS width and height have worked as there is a space where the div is and its sized as my CSS tells it to be - but the image is not there.. I have looked on the server and the image is there so Im stumped?

    I have tried this using a style sheet for the CSS and inline on the page like this like i have at the moment..

    Code:
    <div style="background-image:url(skin/sidePicGrey1.gif);height:148px;width:124px;background-position:left;background-attachment:fixed;background-repeat:no-repeat;">
    If anyone can advice id be greatfull.
    Thanks
    Tag

  2. #2
    Join Date
    Dec 2008
    Location
    Denver, Colorado
    Posts
    389
    are you able to see the image in your browser if you type it's full path: http://www.yoursite.com/skin/sidePicGrey1.gif

    ?

  3. #3
    Join Date
    Mar 2007
    Posts
    156

    Thumbs up

    Quote Originally Posted by 6StringGeek View Post
    are you able to see the image in your browser if you type it's full path: http://www.yoursite.com/skin/sidePicGrey1.gif

    ?
    Hi,
    I found that if I remove this:

    background-position:left;background-attachment:fixed;background-repeat:no-repeat;

    and have it in my style sheet as this:

    #sidePic{
    background-image:url(skin/sidePicGrey4.gif);
    height:148px;
    width:124px;
    }

    It seems to work without the removed parimeters above? Im not quite shure why as I thought they were all good for holding the pic where I wanted and not allowing a repeat ..

    Thanks again for reading.
    tag

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,198
    As long as #sidePic has the correct width/height for the image, then this also should work:
    Code:
    #sidePic {
    width: 124px;
    height: 148px;
    background: #XXXXXX url(skin/sidePicGrey4.gif) no-repeat top left fixed;
    }
    #XXXXXX is just the background color if wanted while image loads.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles