Anyone know what the conflict is?

Discussion in 'HTML & Website Design' started by Dee2007, Aug 14, 2012.

  1. #1
    Hi

    I have a full background added to the page below and also code to stretch the top banner, and whilst independently they both work great, together there is a conflict and the top banner disappears after a second or two, it's as if it's being covered by the background. I have tried altering the z index numbers on both but it makes no difference.

    Please can anyone advise me how to fix it?

    http://tinyurl.com/9zq2uum

    Thanks in advance

    Dee
     
    Dee2007, Aug 14, 2012 IP
  2. nemanja.todic

    nemanja.todic Well-Known Member

    Messages:
    69
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    130
    #2
    To quick fix the problem - just add position:absolute to the first <img> inside body.

    But, I reviewed your markup and your whole concept is wrong, or at least not clean. Couple of suggestions:

    - Get rid of the <table> tag. You should never use tables to design pages layout.
    - Make distinguish between content and design. Is your banner actually a content? Probably yes. Is website background part of the content? Definitely not. If a image or character is part of design you should define it inside CSS. Otherwise it's a HTML element.
    - Don't solve problems that are already solved. To view best way to implement full page background visit css-tricks.com/perfect-full-page-background-image/.
    - Avoid absolute position whenever possible. For what you're trying to achieve here, it is really not necessary.
     
    Last edited: Aug 14, 2012
    nemanja.todic, Aug 14, 2012 IP