Larger than default content width image slideshow

  • Unknown's avatar
    jgweir · Member ·

    I would like to have a slideshow of images just on the homepage which is wider/larger than the default width for content. Any ideas how I can do this in the CSS. Alternatively a static image on the home page which spans the entire screen.

    I like to avoid plugins as that would mean I would have to upgrade to business form premium.

    Any help greatly appreciated!

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi there,

    which is wider/larger than the default width for content.

    This gets a bit tricky with just CSS, since there’s often JS involved, too.

    Major CSS changes are outside our scope of support; for those we recommend hiring someone like UpWork.com to work with you to create the right look.

    Newer themes that have a wide block format could probably handle it, though.

    Alternatively a static image on the home page which spans the entire screen.

    Still a bit out of scope, but ~generally~ speaking, something like this could work

    header#masthead:after {
    content: " ";
    display: block;
    height: calc(100vh - 200px);
    margin: 100px -50px 0;
    background-image: url(https://johnweirarchitect.files.wordpress.com/2019/08/fyfield-sth-elev.jpg);
    background-size: cover;
}

    You could also put it :before the masthead if you wanted to literally take up the entire page without your logo or anything, then change the height calculation to just 100vh.

    Again since layout changes like this are outside the normal support scope, I’d recommend just tinkering a bit, then hiring someone if you need more help. Hoping that helps.

  • Unknown's avatar
    jgweir · Member ·

    This is perfect, but how can I make it so it only applies to my home page, and none of the others?

    Thanks in advance! :)

  • kokkieh · Staff ·

    To only apply it to the home page we need to make the selector more specific.

    So changing header#masthead:after to .home header#masthead:after, should do it.

  • The topic ‘Larger than default content width image slideshow’ is closed to new replies.