• 0

adding padding gives me white space


Question

Posted · Report post

I want to add padding to top and bottom of the body tag but when I do the background image doesn't display and only white space.

how do I get the header to move down to show background at top and bottom.  any insight would be helpful

 

 

margin.png

 

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

Posted · Report post

Hi,

Is the site live? I'd need to see it to venture a safe guess about the CSS to fix it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

yes its at www.inktopgraphics.com but I only get that when adding padding to the body element.  seem to not be able to put space there while having the background cover it. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

Padding is the space inside elements, so if you add padding its going to increase the area inside your element that is why it is moving down.

If you want to add space i.e. a gap between your header and the top of your screen, you will need to use margin and not padding.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

yes sorry margin is what I meant, it still doesnt work  see image with margin on the top body.

 

topper.png

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi outtareach - I believe this is because of the background color you've got set for the content area. How about manipulating the header a bit so it shows the background and then add the extra spacing like this?

 

 header {background: url("http://www.inktopgraphics.com/wp-content/uploads/2013/10/grey.jpg") repeat fixed 50% center rgba(0, 0, 0, 0); padding-top 20px;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I understand and if I have a image then I add the padding to the image but the bottom I have a solid color in my footer and then adding margin to the bottom gives me the same thing with white instead of the background image.

 

bottom.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now