Question

I realise this problem may have been touched on before but here goes.

I have coded the top banner of a page that I am working on.

I am now required to add an image underneath that will have text sitting on top of it along with a form field and button.

This ideally needs to be situated within a div tag. This won’t work however, no matter how hard I try it is unresponsive to my coding. Every time I try to place a background-image in the div wrapping the center content it just plain wont show.

Due to this I have ended up placing the image inside of the div as a normal image and having my text and form fields positioned absolute.

This seemed to work fine and nearing the end of the project I decided to check it out on firefox and a few different resolutions.

This resulted in my form fields and content within that section shifting to the right!

Can anybody help me here?

Really am stuck for a way to sort this.

You can find my code at http://codepen.io/anon/pen/JpLkE

Answer 1

I have checked, as per my understand,
your first problem is- background image in not coming in within the , so put width and height inside so look like

<img src="your_background_image.gif" alt="" height="42" width="42">

second is nav and footer is not coming in there place ….
put there outside all and fix the position in css.