• 0

Top And Bottom Padding on body


Question

Posted · Report post

I have a background image that is basically a visual container for the site but I want the top and bottom to have some breathing room.  Right not the image is flush with the top of the page and changing in background options isnt working and when I add padding to anything else(site warp, body) it worked but I get a white space instead of background color.  Any insight is appreciated.

Share this post


Link to post
Share on other sites

12 answers to this question

  • 0

Posted · Report post

Okay, you can apply backgrounds to different visible parts, using CSS. 

 

Each container has its own custom class field in DMS.  Each custom class can assign a background color and image.  You do this with CSS.

[attachment=1541:containers.png]

 

As you can see from the image above, each container can display different CSS.

 

You can see each container in DMS has a custom class field.  And I believe we've previously covered naming classes.  But for our example, to get the yellow background in the Column section, click the pencil icon, and add

my-yellowbg1

 

Then, to make it appear with just yellow as a color background, just add:

.my-yellowbg1 {background-color: yellow;

padding: 20px;

margin: 40px;}

 

http://www.w3schools.com/css/css_background.asp can help you with how to apply colors, images, and position things.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You could use min-height, margin-top and margin-bottom or padding-top or padding-bottom to control the spacing so that your image is wrapped. Try to make sure you're setting these values with % or em and not px.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I fixed it by uploading the image to the top section and not in the global options but doing it this way till not bring up my background on all pages unless I add it through the each top section which is counterproductive.  When I add it to the global options it is flush on top and anything I do gives it space but the space isnt the color of the background and just white space. I basically want the body tag to move the background image down some so that its not at the top and anything I do will not do that if I put the image as the main background.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

adding padding to the body just gives me this, you can see the white space on the top as well.

 

padding.png

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I can't see the intended attachment.  You have to use "More Reply Options" (upload tools under the edit area) to include images. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

sorry the image got deleted because the instagrid plugin crashed my site and I had to reupload/reinstall wordpress and pagelines so the online file was deleted.  Whenever I try to use the image upload here I get an error so I just upload and show it that way.  here it is again.
padding.pngpadding.pngpadding.png

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It seems you need a combination of background color PLUS background position.  See http://www.w3schools.com/css/css_background.asp

 

When you add the image using our settings, you can add a Custom Class.  Write code to match that custom class and position the background image like this: background-position:center 20px;  

 

That code centers the background, and sets a padding top of 20px.  Of course you can change my code as desired.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

thanks but what if I want a pattern image under for the background instead of the black?  If I put a background image in "color/style" I cannot put a pattern

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

thanks a bunch, I figured if I put the pattern as the background then put my actual background in the background for a section or header that it works but wasnt sure if that was the proper way to do it.  its just that sometimes you want more than a plain color as your framing for the site so I wanted to put a background image which is now working correctly.  I appreciate the help and will continue supporting.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Happy to help.   You can always add a bg image using CSS to any one of those sections/containers.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

still trying to add simple margin to the top of the body but still getting white space, not sure how to remedy this issue without using an image in the header even if its a color just to be able to apply padding to it.  How would I just do this to the main div?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

To achieve this kind of layout, using Boxed Mode would be better than full width, then you can apply a margin-top to the .boxed-wrap class, like so:
 
 
However, if you do so and use the Fixed Nav, you will need to apply the same margin-top as you do to the .boxed.wrap class but instead use the negative value. For example, if you have used margin-top: 4em on .boxed-wrap, then you will need to use margin-top: -4em; on the Fixed Nav class too.

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