Cover page

  • Resolved lamapane

    (@lamapane)


    8 years ago

    Hello everyone,

    I’d like the front page of the attached website to show as a cover page (i.e. image covers the entire screen – see for example: http://www.thegarageinnovation.com/caldo/index.html). The page attribute for that page is “panel page template” as I’d like to add additional content scrolling down below.

    I tried to use:

    .post-106{
   position: relative;
   width: 100%;
   min-height: auto;
   background-image: url(http://whisperingoutloudcoaching.com/wp-content/uploads/2018/05/img_jump_dark.jpg);
   background-position: center;
   background-size: cover;
}

    but this does not work as it looks like to post-106 container is much smaller than the screen.

    How do I dynamically adjust the size of the container so it fits the screen no matter of the screen size?

    Thanks a lot for your help!

    Luca

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    8 years ago

    Hi there, give this a try. What it does is to hide the post featured image on the home page and then adds that image to the body element, and then hides the footer section so it doesn’t interfere, and then also removes the translucent overlay on the image.

    .home #post-106 {
  background: none;
}
body.home {
    background: url('http://whisperingoutloudcoaching.com/wp-content/uploads/2018/05/img_jump_dark.jpg') no-repeat scroll 50% 50% / cover;
}
#colophon {
  display: none;
}
.home.page-template-panel-page .hentry.has-post-thumbnail::before {
  background: none;
}
    Thread Starter lamapane

    (@lamapane)

    8 years ago

    Thanks @sacredpath, that resolves my issue!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Cover page’ is closed to new replies.

  • 2 replies
  • 2 participants
  • Last reply from: lamapane
  • Last activity: 8 years ago
  • Status: resolved