Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Aug 2003
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problem with CSS Background image

    Hi,

    I want to set the image displayed on a page from a global stylesheet.

    So I have <IMG> tags and have been using the stylesheet attribute: BackGround-Image: with a relative or full path to the image file.

    Trouble is, although IE (that's IE 6.0) displays the picture given in the stylesheet, it also shows the image placeholder icon...

    it's very strange, I have my image (gif file!), and in the top left hand corner the standard image placeholder that should only appear when IE cannot find an image...

    here is my HTML that looks normal using SRC of Image:
    <IMG style="WIDTH: 259px; HEIGHT: 87px" height=87 src="images\LapHeader1.gif" width=203 border=0>

    and here is the HTML that shows the image, but also the placeholder:
    <IMG class=LapHeaderImg1 WIDTH="203" HEIGHT="87" BORDER="0" style="WIDTH: 545px; HEIGHT: 253px">

    and here is the CSS used in the stylesheet:
    .LapHeaderImg1
    {
    background-attachment:fixed;
    background-image: url('..\images\LapHeader1.gif')
    }

    the url is ok...it's a relative one at the moment....

    thanks for any help

    Phil

  • #2
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    OK if you just basically want a background image then go into the <body> tag and enter this

    <body background="image.gif">

    That should stick

  • #3
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <img/> should more or less never be used. If you want to attach an image to something, use the CSS property background-image. Say you want to include a banner image that contains the text 'hello world' in fancy formatting. This is how you should do it:
    Code:
    <h1 id="header">Hello World!</h1>
    With some CSS:
    Code:
    h1#header { background: url(gif.gif) no-repeat; text-indent: -2000em }
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #4
    New Coder
    Join Date
    Aug 2003
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    RE Image

    thanks but you misunderstand my issue. I can susccessfully display the image using either the CSS method or the IMG (HTML) tag with no trouble.

    Problem is that when I do it with the CSS method, I get the IE Image placeholder overlaid over the image...

    this is very strange.

    anyone come up against this before?

    thanks

    Phil

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I'm a little confused why you have a <img> in the HTML and a background-image in the CSS. Not to mention in the <img> you have two separate dimensions set. Are you trying to place an image over the background image? And if so, which of the two is IE putting the placeholder on, the foreground or background image?

    -Rich

  • #6
    New Coder
    Join Date
    Aug 2003
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    RE: IMage....

    Hi,

    No, I am not doing both. I want to just have the image applied by CSS globally...

    I just gave you the code for both for comparison...

    But when I apply the image using that CSS code, IE puts the image placeholder over it....

    When I change it back to the HTML code it works fine...

    I need to apply it using CSS so that the image data is stored in a global file.... then when some rebranding occurs in the future it can all be done in one place.

    To emphasize, I am NOT using both CSS AND HTML to apply the image to the IMG tag...I want to use just CSS, but IE seems to change it...

    cheers

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hi deadstone,

    Okay, you should reread me's post (just how do you do a possessive me'? me's? me''s? ). He's on the right track here.

    Let's say you have an logo image for the header. You could make a <div> for the header and add the image w/ CSS. You don't need the <img> tag.
    Code:
    <div id="header">
    ...whatever else you want in the header, text, etc....
    </div>
    and the CSS...
    Code:
    #header {
         width:300px;
         height:100px;
         background-image:url(../imagesrc.gif);
         }
    Hope this helps,

    -Rich
    Last edited by rmedek; 01-26-2004 at 10:53 AM.

  • #8
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Stop trying to attach a bg image to an <img> element, that's crazy talk. Use a <div> as rmedek has shown

    Originally posted by me'
    With some CSS:
    Code:
    h1#header { background: url(gif.gif) no-repeat; text-indent: -2000em }
    *cough* display:block; *cough*
    Last edited by mindlessLemming; 01-26-2004 at 02:01 PM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #9
    New Coder
    Join Date
    Jan 2004
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: problem with CSS Background image

    Originally posted by deadstone
    and here is the HTML that shows the image, but also the placeholder:
    <IMG class=LapHeaderImg1 WIDTH="203" HEIGHT="87" BORDER="0" style="WIDTH: 545px; HEIGHT: 253px">
    Because you used the <img> tag, your browser is going to try and display the image defined in the tag via the src attribute. Since you didn't define it using that attribute, it displays the placeholder.

  • #10
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by mindlessLemming
    *cough* display:block; *cough*
    *cough* already block *cough*
    Code:
    <!--================== Block level elements ==============================-->
    
    <!ENTITY % heading "h1|h2|h3|h4|h5|h6">
    [quote source]
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #11
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Sorry to break the bubble for you, but just because the DTD specifies the group as block elements doesn't make them render as block elements. The most normative resource you will find on this is <http://www.w3.org/TR/REC-CSS2/sample.html>.

    HTML is a semantical structure language, not a presentational language. The DTD doesn't have anything to do with presentation. The namespace has more connection to beahvior and presentation, but the sample rendering for HTML is the closest to a standard on this area that you are going to get.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #12
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, and it says that <h*> is a block level element.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #13
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Damn, and I thought you had stepped in it

    I take no responsibility for the above nonsense.


    Left Justified

  • #14
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    It was a kind of faulty argumentation - correct conclusion situation.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #15
    New Coder
    Join Date
    Aug 2003
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up sheepish grin ...

    thanks everyone...

    I understand it better now...can't use global CSS to define images with local IMG tags...

    cheers

    Philip


  •  

    Posting Permissions

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