Possition a large logo

HTML & CSS
1

I have a large logo that exceeds the header area so I want to position it to overflow into the content area.

I have placed the style above the code for the logo in the header and the style sheet as follows:

<div style=“position: absolute; z-index: 4;”>
#logo { height: 1024px; width: 1024px; position: absolute; top: 80px; left: 10px; z-index: 4; }

My questions are:

  • Do I use absolute or relative and how do I know which one to use?
  • How do I know what z index to use?
  • The possitioning seems to be moving the slider background also why is this?
  • Why has the top menu moved to the left?

Many thanks for your help

2

It’s best to show us what you are talking about. Anyhow, in general, set the logo to position: absolute and its container to position: relative. The z-index doesn’t matter, as long as it is higher than anything else, so probably 2 would do. But you may not want the logo covering anything else. Wow, 1024px height sounds too tall to me. Sounds lke the logo will cover your whole page.

3

oops sorry about that it’s http://www.boitproductions.com

4

when you say logo position to absolute and container to relative do you mean?

container the style in the header
logo style in the style sheet

also why is the background for the slider moving with the posision of the logo?

5

Sorry, I was away for a while. I did look at the site before, and TBH, that images looked way too big. I’d suggest just a normal-sized logo up in the left corner.

When using position:absolute, that position must be in relation to something. Whatever parent element has a position (such as relative or absolute) with provide the positioning context. f there is no such element, then it is the viewport.

In a situation like this, though, having a huge image on the page like that will mean that it could cover everything on the page if set to a higher z-index than anything else, which would mean nothing else is clickable. I would suggest rethingking the design before going further than this, or at least post an image of what you are picturing. You could just set that logo as a background image to the whole page.

6

ok this is the desired effect, I’m not sure how else to get the logo in with the silhuoette

I need to also make the logo with transparent backgrpund but just so you get the jist

7

did I attach the file correctly, can you see it?

8

Attachments uploaded to the forum take a while to be approved. To display instantly, link to an externally hosted image.

9

oh right, ok here is a link:

http://organicwebdesigns.co/images/snap-nowrbp1.png

10

Using what you have now, adding these styles would get you close to what you have in that image:


#header {position:relative;}
#header img {position:absolute;}
11

yea, that’sworking, i’m now trying to possition the image but padding-top / left doesn’t seem to be moving it

12

Use top and left settings instead. E.g.

#header img {
  position:absolute;
  top: 20px;
  left: 40px;
}

Those are just random values, so choose what you need. You can also use right and bottom, although I don’t think they are what you want here.