• 0

White space at bottom of big screens

Question

Posted · Report post

Hi!

 

How do I make the background tiling go all the way to the very bottom of the screen, whatever screens size?

 

I've added a tiled background image to my site, but on pages with little or no content, the tiling stops at some point. This means the background color shows at the bottom of the screen, especially on larger screens.

 

I'd like the tiling and the content background to continue to the very bottom.

 

(If you're on a small screen, try zooming out your browser and you willl see what I'm talking about).

 

 

Here's an example:

http://www.lietzen-ms.dk/

Share this post


Link to post
Share on other sites

34 answers to this question

  • 0

Posted · Report post

Thank for the fix Mr. Powers! Just what I needed.

Although it wasn't working ok in first place. I made a few changes to make it work:

<script> /* <![CDATA[ */
!function ($) {
jQuery(document).ready(function() {
 
var myWindowHeight = $(window).height() // window height
,   mySelector = '.section-content-area > .texture > .content'
 
//  ^^ what you're setting to window height (play with this)
 
 
$(mySelector).css('min-height', myWindowHeight)  //<-- changed from myBodyHeight
 
// If you want to run this on browser window resize as well
$(window).resize(function() {
    
var myBodyHeight = $('body').height()
 
$(mySelector).css('min-height', myBodyHeight) // <-- changed from myWindowHeight
 
});
}) }(window.jQuery); /* ]]> */ </script>
2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I don't see a tiled background image. Did you remove it?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

i am also interessted in this topic. It has something to to with a minimum-height setting somewhere in Pagelines - i guess the value is 400px. On a page with full width sections enabled and for example #footer { background: red } you will see a white space below the red footer section. This happens if you have only a few lines of content on that page which is less than e.g. 400px.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry I might have messed it up, working on the site while waiting for a reply. Ok, so, I've created a page that I'm not going to touch, explaining the issue. Here it is:

 

http://pressmoo.dk/Wordpress3/

 

I've removed header and footer. What you see is a simple page with a few lines of content.

 

Issues:

 

The tiled background (grey stuff from the MacBook Pro) doesn't go all the way to the bottom of the screen. There's a portion of black (the page background color) showing.

 

The content area (white background) doesn't go all the way to the bottom of the screen.

 

 

How can we make small, tiled background images go all the way to the bottom of all screen sizes, keeping everything responsive?

 

How can we make the page background color go all the way to the bottom of all screen sizes, keeping everything responsive?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

Please go to Dashboard > PageLines > Site Options > Layout Editor.  Do you have Full Width Sections selected under Site Design Mode?

 

It appears to be that you have an empty footer section there. Since the footer is customizable, you can just use CSS to add a background.  Please see www.epicurus.com (use Firebug for Firefox or Chrome's Inspection Tools) and scroll to the footer area.  You'll see how a background may be added to this area.

 

CSS will allow you to use both the background (tiled image) and the content (white).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob!

 

I tried following your advice, adding a footer, adding the tiled background to the footer (although I'd prefer to just simply have the page background continue, not having to set the background image more than once).

 

This, alas, doesn't solve the problem: 

 

I still have a big empty space at the bottom of the screen, in this case black (body background color). It seems there's a min-height of 400px being set for the content somewehere by default. Would it be possible to somehow let that property be 100% instead of 400px (maintaining responsiveness)?

 

Also I'd like the page background (in this case white) to stretch all the way to the footer, or if I exclude a footer, to the very bottom of the screen.

 

 

Help much appreciated!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok, great Danny, but that's not what I need. I'd like for the tiled background to stretch all the way down to the bottom of the page, not using a footer. And the page background color to go all the way down to the bottom, regardless of the visitors screen size.

 

Should be possible?

 

A fixed-height footer, as shown in the Bootstrap-example, wouldn't solve the problem as it is fixed-height. I'd have to make it like 3000 px high and (theoretically) someone might still be on a larger screen. Besides, then I'd have to make up content for the footer.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

How did you add the background?  Can you screenshot any settings or CSS used?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Rob, I added the tiled background in Site Options > Color Control > Site Background Image.

 

Seems I have figured it out though (the tiled body background issue, not the page color issue). :

 

 

html {
    background-image: url(tiled-background-image.gif); background-repeat: repeat;
}
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Great news!

 

If you can screenshot the color settings for your background colors I may be able to provide some guidance.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

Has this been resolved as I am unable to see any issue ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Still one thing unresolved - and I think this is the one that Guido and a few others also wanted to know about:

 

Is it possible to have the content area stretch all the way to the bottom of the screen, even with little or no content (maintaining responsiveness)?

 

Example of default platformpro behavior:

 

http://pressmoo.dk/Wordpress3/

 

There's lot's of horizontal stretching going on, but no vertical.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, this has to be one of the oddest things I've ever seen, but it may have to do with your layout (percent vs. pixels).

 

If you change the code below to include min-height : 100%; there's no change.

#content .content-pad {
    padding-top: 10px;
}

But.... If you do this, there's immediate change:

#content .content-pad {
    min-height: 1000px;
    padding-top: 10px;
}

I'll have to discuss this with the developers, but please let me know whether you have pixel or percentage selected for your layout.

 

Hope this helps.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob. I've got the default setting, which is pixel. Screenshot here:

 

http://pressmoo.dk/Wordpress3/wp-content/uploads/2013/03/Screen-Shot-2013-03-05-at-12.25.05-PM.png

 

 

I tried changing the setting to percent and then add the "min-height:100%" to #content .content-pad, but nothing happens. 

Your fix kinda works, but obviously only for screens that are less than 1000px vertically. And leaves me with a scrollbar, where one is not needed.

 

 

 

Hmmm, tricky one this... Help still much appreciated :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try this, it should fix the issue.

 

#site {
background-image: url('http://www.lietzen-ms.dk/wp-content/uploads/2011/11/background.jpg');
background-position: 0% 0%;
background-repeat: repeat;
}


If it does, then remove the uploaded background image from your settings, as its no longer needed.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny, tanks for getting back on this, but we are way past the background tiling issue! :)

 

The issue I still need your help resolving, is how to make the content area stretch all the way to the bottom of the page, even with little or no content. Please have a look at the example I've given, it's the content area with a white background that I'm talking about.

 

http://pressmoo.dk/Wordpress3/

 

I really do appreciate your help, but things would move faster if you'd care to read into the thread! Just the very last post at least. Thanks.

 

 

Cheers!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there,

 

Yeah i can't get this to work either, I'll ask the core team and see what they say. I would image its due to the fact that if you remove the static px height and put in a %, that % works off the containers that item is inside. If none of them have been given a set height to follow then it's like '100% of what??" so it just stays as it is.

 

However, just for info and in response to your earlier question to Rob, you can turn the scrollbars off using

 

body {
    overflow: hidden;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi James! Great, really hope somebody can figure this out. I'll cross my fingers and wait for the core team.

 

About the scrollbar thing, thank you, but that wouldn't work if I had content taller than the 1000px somewhere else on the site.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I use this on my site (using PlatformPro), but it doesn't work on yours...

 

body #page-canvas {
    margin-bottom: -15px;
    margin-top: -5px;
}

 

Not sure why... but have a play around with it. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you Jenny - don't see how setting a negative margin will solve the stretch to 100% height issue though?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

On my site, it isn't a non-100% issue, it's a hidden padding/margin somewhere. The code above has worked on all of my PlatformPro sites to get rid of the extra spacing but I'm not sure why it isn't working on your site.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok, thank you Jenny - but do you understand what my trouble is? I'm trying to make the content area stretch all the way to the bottom of the screen. It doesn't do that unless you have content tall enough for it to do so.

 

Unlike the default 100% width setting it isn't possible to set a 100% height property, as far as I can see.

 

 

I think what you're talking about is the couple of pixels black space at the top and bottom that you'd normally get on a platformpro site. But if you look at my test-site I don't have that:

 

http://pressmoo.dk/Wordpress3/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Just an update to let you know this has been emailed over to get some more info from the core team, haven't had a response to confirm yet, but people are having a look into it. As soon as I know abit more I'll let you know.

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