Front Page Margin/Padding • BuddyBoss

Tagged: background image, boss, front page

This topic has 11 replies, 2 contibutors, and was last updated 9 years ago by Alyssa.

Viewing 12 posts - 1 through 12 (of 12 total)

Question
March 3, 2015 at 4:45 pm #36763

Anonymous
@
@tjchester,
I am trying to put a full width and height background image on the front page of my site, but there is just a little sliver of white (margin or padding) where the image cuts off at the bottom between it and the footer. I would like to remove that so the background image fits perfectly between the top boss header and footer. How can I do that? I’d like to remove that (margin or padding) only from the front page. Also, if you have any suggestions on how I can make the image responsive across different screen sizes that would be appreciated.
Answers
March 4, 2015 at 11:18 am #36794

Alyssa
Participant
@alyssa-buddyboss
@ryanmaler can you send me the code you are using since your site is private, I need to see exactly what white area you are talking about.
For a responsive background image see tutorial here: http://sixrevisions.com/css/responsive-background-image/
March 4, 2015 at 12:42 pm #36807
Anonymous
@
@tjchester,
Here is where I am at. First off, just to let you know I am what I would consider beginner status coding wise, but improving. I used the link that you supplied because prior I was using a plugin (thrivethemes page builder), and I prefer to go with your recommendation and learn a little along the way. So here is the code I ended up using, all from the github link corresponding to the sixrevisions post link you supplied.
hmtl (I placed this file as a new file in the boss-child theme folder):
```


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Full Background Image</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="author" content="Six Revisions">
  <meta name="description" content="How to use the CSS background-size property to make an image fully span the entire viewport.">
  <link rel="icon" href="http://sixrevisions.com/favicon.ico" type="image/x-icon" />
  <link href="http://fonts.googleapis.com/css?family=Kotta+One|Cantarell:400,700" rel="stylesheet" type="text/css">
  

  
  <link rel="stylesheet" href="responsive-full-background-image.css">
  
</section>
</header>
</body>
</html>
```
css (I placed this in the custom.css file in the boss-child theme folder):
```
/* Responsive Full Background Image Using CSS
 * Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
*/
body {
  /* Location of the image */
  background-image: url(http://mysite.com/wp-content/uploads/2015/02/photodune-9340505-young-man-traveler-with-backpack-reading-book-and-writing-notes-outdoor-l-2.jpg);
  
  /* Image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Image doesn't repeat */
  background-repeat: no-repeat;
  
  /* Makes the image fixed in the viewport so that it doesn't move when 
     the content height is greater than the image height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based on its container's size */
  background-size: cover;
  
  /* Pick a solid background color that will be displayed while the background image is loading */
  background-color:#464646;
}

/* For mobile devices */
@media only screen and (max-width: 767px) {
  body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(http://mysite.com/wp-content/uploads/2015/02/photodune-9340505-young-man-traveler-with-backpack-reading-book-and-writing-notes-outdoor-l-2.jpg);
  }
	}
```
My goal is to have this background present on the front page only. Just like the examples in the link you supplied. The outcome of the code above, puts the image as a background globally on the site and this needs a little more clarification. It actually isn’t visible when just viewing the front page or any other page. Its behind the page. So with my Mac I am able to scroll up or down an if I scroll up or down far enough and push the page slightly out of view I can see the background image I am wanting to use behind the page. Hope this is clear. What do I need to add to have this image present only on the front page, and used as the actual page background (keeping the boss top bar and footer)?
March 5, 2015 at 2:09 pm #36853

Alyssa
Participant
@alyssa-buddyboss
@ryanmaler excellent, this shouldn’t be too bad. In the CSS change body { to body.home-page {
Now we need to undo all the white background elements with this CSS:
body .site, body #main-wrap, .site-header{background-color:transparent !important;}
March 5, 2015 at 5:12 pm #36874

Anonymous
@
@tjchester,
Almost perfect. One issue, I put the body .site, body #main-wrap, .site-header{background-color:transparent !important;} in my custom.css global section and now after a user logs in all of the white that was present in my theme color selection (Mint) is now transparent. Home page is looking solid now though. How can I just make the home page white transparent?
March 6, 2015 at 3:48 pm #36908

Alyssa
Participant
@alyssa-buddyboss
@ryanmaler, ah forgot that. Another simple step:
body.home-page .site, body.home-page #main-wrap, .home-page .site-header{background-color:transparent !important;}
March 6, 2015 at 3:53 pm #36909

Anonymous
@
That took care of it. I knew I needed to use .home-page again, just wasn’t sure where. Thanks @tjchester
March 7, 2015 at 1:01 pm #36949

Alyssa
Participant
@alyssa-buddyboss
No Problem!
March 29, 2015 at 12:15 am #38158

Anonymous
@
@tjchester I am posting back in this older topic because I’m kind of looking for a little further information on it. You gave me an excellent resource (six revisions) to help me setup a full image background homepage, and I am looking to expand on that a little and was hoping you would have another reference for me. I am relatively new in the game so I don’t have many go-to resources yet. I currently have a full image background homepage setup on my site, but currently there is no information under that image. What I would like to do is setup the page to open to the full screen image in the viewport and then have the option for visitors to scroll down to learn more (with the image remaining at the top). Similar to on this site (http://www.plugandplaydesign.co.uk). Just a random example. You can ignore all of the fancies with the menu and such. All I am looking to do is setup the scroll down option with a nice arrow icon or button. Could you recommend any resources (tutorial type similar to six revisions) for me?
March 29, 2015 at 9:31 am #38171

Alyssa
Participant
@alyssa-buddyboss
@ryanmaler I believe what you need to look into is “parallax web design”. It’s very complex but perhaps there is a wordpress plugin you can search for that is easy to use.
March 29, 2015 at 10:55 am #38181

Anonymous
@
@tjchester thanks. Now I know what I’m looking for.
March 30, 2015 at 8:13 am #38214

Alyssa
Participant
@alyssa-buddyboss
You are welcome 🙂

Viewing 12 posts - 1 through 12 (of 12 total)

The question ‘Front Page Margin/Padding’ is closed to new replies.

Support Forums

Question

Answers