[Resolved] Set Page Background to be Screen Height and Width or Height and Width of Content

Home Forums Support [Resolved] Set Page Background to be Screen Height and Width or Height and Width of Content

Home Forums Support Set Page Background to be Screen Height and Width or Height and Width of Content

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #633605
    Mike

    Hello,

    This is a difficult one to explain… here goes…

    So, essentially I want to have a page layout of a large fullscreen background image with a transparent box in the middle containing the page content.

    I have been half successsful with this, e.g I can make it look perfect on my 4k desktop, however when the device shrinks it all goes bad.

    I am looking for a way to make my page (section) background be either 100vh (full browser height and width) or if the content is bigger than the browser height and width then to fit the div content instead.

    Plus, I want my slightly transparent content box to be aligned to the center of the page at all times.

    I have tried multiple things for this one and just cannot seem to get anything working properly.

    I want it to be fairly dynamic and not manually setting heights of pages as if the content changes then I would need to edit the CSS accordingly and I dont really want to do that.

    Sorry if my explination is a little lame, I think once you see the site then you will understand what I am trying to acheive.

    Thanks,
    Mike

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #633714
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    What if instead of doing this:

    .home #Home > div {
        position: relative;
        top: 50%;
        transform: perspective(1px) translateY(-50%);
    }

    You did this:

    .Page {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
    }

    Let me know πŸ™‚

    #633914
    Mike

    Hello Tom,

    That seems to have worked ish. It is still however not adding a scrollbar when I make the page smaller than the content.

    It is just pushing the content to the middle of the page and cutting off the top and pushing the bottom down below the background image.

    Essentially if the content is bigger than the background image of 100vh then the background image should fit the content and not the page.

    Whereas if the content is smaller than the 100vh background image then the background image should stay at 100vh.

    So essentially if the content fits on the page nicely then it can have a background that is aligned to the full page. Whereas if the page is too small to hold the content then the background image will fit the content and not the page!

    Hopefully that makes some sense?! πŸ™‚

    Thanks,
    Mike

    #634280
    Tom
    Lead Developer
    Lead Developer

    That’s a tough one.

    I wonder if doing something as simple as this would work?:

    @media (max-width: 768px) {
        .Page {
            display: block;
        }
    }
    #634323
    Mike

    Hello,

    That kind of worked. The problem now is that because it uses width its not fully responsive when I drag my browser window up, and also the background image does not fit behind all the content its still fitting to the browser window!

    Man, when I embarked on this I never thought it would be such a nightmare! I figured it must be pretty easy to have a background image that was at least as big as the browser window if not larger to fit the content!

    By the way, technically this is all one big GP section, there is no background image defined for the page only the section. Would this cause a problem?

    Thanks,
    Mike

    #634421
    Tom
    Lead Developer
    Lead Developer

    Working with background images is always a pain when dealing with responsive design.

    Is there an example of this you have that I can look at? It might help to see exactly what you’re hoping for, as I’ll be able to inspect the code.

    #642751
    Mike

    Hello Tom,

    Sorry for not getting back to you regarding this!

    Unfortunatly I dont have any examples of this, and maybe this is why!

    I am just too original!

    This site is my new personal site so I can always have a think and change the design.

    Thanks,
    Mike

    #642880
    Tom
    Lead Developer
    Lead Developer

    No problem – let me know if you find something you think will help us achieve it πŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.