Kevin Powell - Community•6mo ago

why is this happening ? how can i make it stop. i want that pyramid to be half show on full screen.

Everything is so big and i used the values same as my figma design but still. i have this background image it should show 50% of it in full desktop mode and should be sticking to right side all the time and when it comes to mobile and tablet screens then it should show 20 to 30% only

5 Replies

peterpumkineaterr•6mo ago

Jochem•6mo ago

without sharing your code, it's impossible to help preferably in something like codepen or another live version that actually demonstrates the problem it's probably not something I can help with, but sharing the code will let someone else have enough info for them to help you

peterpumkineaterr•6mo ago

okay let me try

<div class="hero-img"></div>

<div class="hero-img"></div>

.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    background: url(../illuminati.png);
    background-size: cover;
    background-position-x: 2%;
    background-position-y: 0%;
    width: 100%;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
}

.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    background: url(../illuminati.png);
    background-size: cover;
    background-position-x: 2%;
    background-position-y: 0%;
    width: 100%;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
}

codepen is not working this scss code is for mobile view

    .hero-img {
        background-position-x: -260%;
        background-position-y: 0%;
        background-repeat: no-repeat;
    }

    .hero-img {
        background-position-x: -260%;
        background-position-y: 0%;
        background-repeat: no-repeat;
    }

this is above 900px

MarkBoots•6mo ago

still we need more context. a codepen is really much more helpful. you say it is not working, but you can use scss in it, and you could use a placeholder image like https://placehold.co/600x400 to match your orginal. We only need the section that is relevant

clevermissfox•6mo ago

Or can upload your exact image here and use the link it gives to host it on codepen so it's the right aspect ratio . Or upload to https://imgur.com

Imgur

Imgur: The magic of the Internet

Gaming

Programming

why is this happening ? how can i make it stop. i want that pyramid to be half show on full screen.