Using a logo over the header css/ html

HTML & CSS
#1

Hello guys,
I’ve been trying to add a logo image over my header.
My header is designed on css and the html is a regular image that will be a logo, I will use it because I wont have too many pages (if there’s a better alternative please say so thanks) any good way to add a logo over the header? thanks.

**

The CSS -

**

body {
	background-image: url("back.jpg");
	    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;;
}

.header {
	background-image:url("header.png");
	height:70px;
	width:110%;
	margin:-10px;
}

.footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
    height: 5%;
    color: #8b3436;
	background-color: #000000;
	text-align: center;
}

p {
	margin-left: 20px;
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	line-height: 26.4px;
}

**

The HTML -

**

<!DOCTYPE html>
<html>
   <head>
     <link rel="stylesheet" type="text/css" href="index.css">
	 <style>
	 .p1 { 
	    color:white;
	 }
	 </style>
   </head>
<body>
     <div class="header">
	 </div>
     <a href="test.html">
	 <img src="logo.png" alt="CSGO Howl" style="float:left";>
	 </a> 	 
	 <div class="footer">
	 <p> Copyright &copy; www.csgochance.com </p>
	 </div>
   </body>
</html>
#2

I’d like to ask you to post a bit more code so we can tell what you are trying to do. So far, it looks all wrong. <td> tags are not closed and a <body> tag is inside a <td>? Am curious to know why you appear to be framing the page with a table, too. That’s been out of vogue for a bunch of years.

Try for a working page, if you can.

1 Like
#3

That’s my whole code -

HTML - https://gyazo.com/cbd19d99c32d2a75d71aaf4bdc8bc830

CSS - https://gyazo.com/91a61e60a3f50aa7fc748b136e27ad03

I’m at the beginning stages so yes, probably everything is wrong, I need to know how to make the logo appear on top of the header.

#4

Why are you using a <table> for this. It looks as though it is quite unnecessary, although as @ronpat says we could do with seeing more of your code.

And that <body> is certainly in the wrong place!

#5

Yes, I realized that the body is on the wrong place because I tried a copy paste some stuff… I fixed it tho, check my last reply.

#6

Ah, our posts crossed. I think removing all the table, tr and td tags would be a good start…

#7

Removed it all, now, my goal is to make the image (logo) be seen over the header that I created.

#8

Please post your code. Not a screen shot of your code.

You can add your code to a post by preceeding the code with three backticks on a line by themselves and ending with three backticks on another line by themselves after the code. Like this:

```
your code here
```

#9

Rather than posting images of your code you can copy and paste the code into your post.
To format as code put three backticks ( ` ) on a line of their own before and after the block of code.
That way if we want to recreate your page, we don’t have to re-type it all from the image.
Or you can mock up a working page using Codepen.

You need to validate your code.
How can I say this, everything is wrong!
The validator will show mark up errors, but it won’t show poor coding practice. Fortunately, people here can. :smiley:

2 Likes
#10

Oh okay, thanks! Edited it all, you can see the code right now.
Sorry for that, didn’t really know it, first day here.

#11

No problem, we were all new once.
So what kind of layout are you trying to achieve?
I tried to make a guess based of what you posted, is this anything close?
(I don’t know wnat the images look like, but used placeholders)
http://codepen.io/SamA74/pen/bewBGr

2 Likes
#13

It works fine, now when I try to upload the logo using the following -

<img src = url("logo.png") alt="My Logo">

While the file is in the same folder as website’s folder.
Btw, is there a way to create a folder inside the website’s folder named as images and direct it to that specific folder to get the image?

Thanks.

#14

In that example the float property is not needed if the logo is the only thing in the header, because the in-line elements (img) will sit on the left by default. But if you were adding more to the header, you want it there.

#15

It’s going to be the menu header so I will need it for more stuff.

About the logo, it doesnt finds it.

#16

That should be

<img src="logo.png" alt="My Logo">

The syntax with url() is for css, used to set the background.

Yes, it may be better to organise your files like that.

<img src="images/logo.png" alt="My Logo">
#18

If this is to be a foreground image, the <img> tag is wrong…

<img src="url or local path to your image" alt="alternate description" width="nn" height="nn">
Don’t forget the width and height attributes, numbers only, they are assumed to be pixels, any units of measure are invalid.

ninja’d. I’m about due for a nap. checking out now. Cheers.

1 Like
#19

Yep, right, it’s all messed up in my head, learned them both css and html in one night… thanks so much mate! It works well!
Btw, what actually did make it go on the header? The < header > tag?

And one more thing (hopefully also the last one) about the width 100%, it doesn’t really goes up to 100%, it doesn’t covers to the max.

That’s how it is right now -
https://gyazo.com/1ddfdebc1089b36936a065eae49a5536

That’s how I would like it to be (made with photoshop) - https://gyazo.com/b616ca9ffe9b689a731afce5bb503e6d

#20

No, it could just as easily used <div class="header"> that would work using the css selector .header

Here you open the <div class="header"> but then immediately close it </div>

That’s the default margin on the body it can be removed.

body { margin: 0 }

The default width of a block element is auto so no need to set a width. Also note there is a difference between width: 100% and width: auto

2 Likes
#21

Shit mate, thanks so much! Looks dope now.

To add the menu buttons, I could use a href with an image and each image will lead to other html page right?
So the buttons that I will use that will be on the header, I use the

aswell for them?
And if I want to edit the exact position of the logo, like to make it a bit more up or left etc, how can I do so?

Thanks again!

#22

You could use images, but text would be better if it’s text.
I see the background image in the header is a gradient, that would be much slicker done with css rather than an image.

background: linear-gradient(#231F1F, #040100);

You can make adjustments using margins or padding.

padding: 10px /* gives equal padding all round */

padding: 10px 20px /* gives 10 at top and bottom and 20 on the sides */

padding: 10px 20px 30px 30px /* 10 top, 20 right, 30 bottom and left */

padding-top: 10px /* just alter the top (or W/E side) */

Same goes for margins.

1 Like
Image href'd