HTML CSS--Creating a banner header

Question

I ve got a horizontal image as a GIF and JPG  It is something I made with Paint--a text logo with an image on a solid background   I am having a lot of trouble trying to get it to display as a banner header   So far  I am only able to get the solid background to show up  The text logo mysteriously disappears  The solid background extends to the full screen over my background image  and I want that  but obviously  with my text logo showing up   This is the code I am using    lt style gt  body     background  url  mybackgroundimage gif   repeat     banner     position  absolute    top  0px    left  0px    right  0px    width  100     height  200px    z-index  -1     lt  style gt   lt  head gt   lt body gt     lt img id  banner  src  mybannerimage gif  alt  Banner Image   gt   lt  body gt    I think there may be something wrong with my image  I tried this using a different image  and it worked  but my text was stretched   How do I create a banner with a logo that doesn t stretch when I use this code

User · Answer

For the image that is not showing up  Open the image in the Image editor and check the type you are probably name it as  gif  but its saved in a different format that s one reason that the browser is unable to render it and it is not showing  For the image stretching issue please specify the actual width and height dimensions in  banner instead of width  100   height  200px that you have specified

User · Answer

Remove the   position  absolute    attribute in the style

User · Answer

You have a type-o   its  height  200x   and it should be  height  200px  also check the image url  it should be in the same directory it seems   Also  dont use  px  at null  aka  0   values  0px  0em  0  is still 0      top  0px    is the same with   top  0    Good Luck

User · Answer

Remove the z-index value   I would also recommend this approach   HTML    lt header class  main-header  role  banner  gt     lt img src  mybannerimage gif  alt  Banner Image   gt   lt  header gt    CSS    main-header     text-align  center      This will center your image with out stretching it out  You can adjust the padding as needed to give it some space around your image  Since this is at the top of your page you don t need to force it there with position absolute unless you want your other elements to go underneath it  In that case you d probably want position fixed  anyway

User · Answer

Height is missing a p from its value   Should be height 200 p x

[html] HTML/CSS--Creating a banner/header

Examples related to html

Examples related to css

Examples related to header

Examples related to banner