Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML/CSS--Creating a banner/header

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:

<style>
body {
  background: url("mybackgroundimage.gif") repeat;
}
#banner {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 200px;
  z-index: -1;
}
</style>
</head>
<body>
  <img id="banner" src="mybannerimage.gif" alt="Banner Image"/>
</body>

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??

like image 284
user2714330 Avatar asked Aug 24 '13 20:08

user2714330


People also ask

How do you make a header banner in HTML CSS?

Create A Div Element Make A Div Full Screen Add Background Image Adjust Background Image Size Position Background Image Create A Container Div Element Create a div or any block-level HTML element with the class…

What is a banner in CSS?

The Banner module is used to display a single image in a webpage. Images can be linked to an internal webpage or file or an external website. 1. The Banner layout uses the HTML <div> Tag as a wrapping element.

How do I make an image a header in CSS?

Header Image CSS: How To Add an Image to the Header You can add any image to your header, and for that, you can create a class in HTML and use and use the background-image property in that class in CSS, or you can also use the div class in HTML and add a CSS image header by using image scr attribute.

Is there a banner tag in HTML?

BANNER is a tag from HTML 3.0 that allows a document to create a non-scrolling area on the screen, and display arbitrary HTML markups within this area.


1 Answers

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!

like image 51
RGLSV Avatar answered Sep 20 '22 17:09

RGLSV