Need some CSS help with positioning the image

[Historical Forums User]

Here’s a snapshot of the problem I’m facing:

http://pasteboard.co/1r5lmM8C.png

I would like to position the image at top of my page, rather than without a space there…

Here’s the link to my CSS! http://pastebin.com/aDuGLfRz

[Beverleyh]

We can’t diagnose from an image or CSS alone – we need the markup too.

If you create a demo in CodePen, we’ll be able to help much more easily.

[Historical Forums User]

I’m actually not able to post it on CodePen as this is a project based on Laravel framework (PHP);

But here’s the markdown anyways! http://pastebin.com/Cq1sv4YY

[Beverleyh]

That doesn’t matter. You are able to build up a live demo in CodePen using the HTML markup and CSS, with a few placeholder images so we can see it all in context. The fact that the markup is being generated by PHP is irrelevant.

A live demo from you is still preferred. At the moment, although you’ve provided (most of) the bits and pieces to jigsaw your page together, you’re still relying on the goodwill, inclination and capacity of somebody else to set it up, test it and troubleshoot on your behalf, and that isn’t as appealing as having a ready-made demo presented upfront that immediately illustrates the problem.

You need to make it easy for people to help you. For example, I’m on an iPad right now so it’s more difficult for me to mock up something on your behalf (hence, my not offering to do it for you). On the other hand, give me a CodePen to edit on the fly and it would be much easier for me to test and narrow down the problem. The other guys here would appreciate it more too :)

[Historical Forums User]

Okay. Here.; http://codepen.io/anon/pen/dXoKMK

[Beverleyh]

You have 60px top and bottom padding on the body element;

body {
padding: 60px 0;
}

Zero it to remove white-space above the header image (and at the very bottom of the page).

[Historical Forums User]

Thanks a lot – this fixed it for me! :)

[Author]

Posts