CODEWITHSUNDEEP
htmlcssresizezooming
theCrabNebula
theCrabNebula

Reputation: 811

Way to set CSS zoom origin to middle of the top of the page?

I'm currently trying to un-zoom my entire front page (outside the background) because it's a little too large. I'm currently using the following code on my website in the body element:

transform: scale(0.7);

But it appears to set the zoom origin to the center of the page

I'd like to fix the floating boxes on my front page to the top of the screen (center-top as the origin, it seems). Before I added the transform, the boxes would be appended to the center-top of the page. I want to keep this style, but with the zoom. Right now, the zoom unhinges the floating boxes from the top of the page, giving some empty space between the top of the page and the floating boxes. I simply want to remove that empty space so that the un-zoomed boxes rest on the top of the screen. Ideally, the top of the first row of boxes would touch/start on the very top of the screen.

Maybe something like "top: 0" needs to go somewhere?

Here's a link to my site: https://www.thefloodplains.com/

Upvotes: 1

Views: 1134

Answers (1)

Gagandeep Singh
Gagandeep Singh

Reputation: 1005

Try to set transform-origin: top; to the body element like below

body {
    margin: 0;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    background: white;
    transform: scale(0.5);
    -moz-background-size: 100% 100%;
    background: url(OceanWater.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform-origin: top;
}

Upvotes: 3

Related Questions