0

I have a splash page where the user will choose a language before entering the site. This page only needs the header region and a background image (for the #main-wrapper div) that should occupy the rest of the screen size.

I'm using

#main-wrapper {
    background: url('img.jpg') center no-repeat;
    height: 100%;
    width: 100%;
    background-size: cover;
}

But it doesn't fill the available space, only the #main-wrapper div, so I end up with a grey area below the background image, where the footer should be.

  • Is there a way to make this region expand all the way to the bottom (I don't need the footer in this particular page) without declaring it's height in px?
  • I want to avoid scrollbars when not necessary, and have the image fill the space when resizing the window or viewed on mobile.

Is it possible to do this with Bartik theme?

EDIT:

I've already hidden the footer, but that doesn't make the #main-wrapper div reach all the way to the bottom. I still get a blank space below it.

3
  • Could you not add it to the body tag? – th0ward Feb 26 '15 at 8:49
  • @th0ward That would add it to the header too :( – brunn Feb 26 '15 at 16:58
  • why don't you use background-image for body so it will take the whole page and put your header above it? – Stefan Korn Feb 26 '15 at 17:12
1

You could style that special page with css to not display the footer (display:none). Drupal delivers a css class in the body tag that identifies the current node, like so .page-node-x, where x is the node id of the page. So you could go like page-node-x .footer.

You could also use a page.tpl override for the specific page where you remove the footer region. Create a copy of page.tpl.php in your themes template folder and name it page--node--x.tpl.php. Remove footer in this file completely.

And as for fullsize background image, maybe this module could be interesting: https://www.drupal.org/project/supersized

1
  • I followed your comment above, I hadn't thought of that. Thanks :) – brunn Feb 26 '15 at 17:55
1

If footer is just transparent, you could also go by applying your rules to body instead of #main-wrapper.

Also, Drupal should hide empty regions AFAIK. Thus, you can try to hide everything in footer region using visibility rules. If that does not work, check page.tpl.php.

Hiding it via page-node-x class with display: none; visibility: hidden; is the easiest way though!

0

As many others have mentioned, why not just add the background-image to body?

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: url('img.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.