CODEWITHSUNDEEP
htmlcsscss-position
Idrees
Idrees

Reputation: 13

I want to place a fixed background behind absolute positioned Images using css

On the very front, when the page loads, I want to show some images scattered around but with the fixed background. Thus, when the user scrolls, the rest of the body rolls up like normal having a background color and everything else. I have seen this on a lot of websites so I am guessing it's rather easy to do, but I can't cause I'm a noob. Really appreciate any help.

heres the html for images

<div class="front bg" style="border:5px dashed black;">
    <img id="dp" src="images/dp.jpg" alt="Face Up Front">
    <img id="finger-face" src="images/gall12.jpg" alt="Finger Face">
    <img id="with-friend" src="images/gall19.jpg" alt="With Friend">
</div>

heres the css i tried

 .bg{
    background-image: url('images/showoff.jpg');
    background-size:100vw 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position:relative;
}

#dp{
    width:16%;
    height:auto;
    position:absolute;
    top:15%;
    right:8%;
    border-radius: 30px;
}

#finger-face{
    width: 15%;
    height:auto;
    position: absolute;
    top: 55%;
    left: 8%;
}

#with-friend{
    width: 30%;
    height:auto;
    position: absolute;
    top: 25%;
    left: 35%;
    border-radius: 30px;
    box-shadow: -1px -1px 6px 0px #ff0000;
}

EDIT: After spending the whole night grinding through this mess, I came across something that my intuition tells me is not a very professional and long term fix but this is the tutorial that did it for me. I added the background-attachment:fixed property in the bg styles.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page

I actually wanna know if this is a professional and a practical solution. And I have no idea what role html{height:100%; margin:0;} has to play. So I would appreciate any suggestions or comments.

Upvotes: 1

Views: 99

Answers (2)

Frederik v.K.
Frederik v.K.

Reputation: 106

If i understand you right you want a parallax effect. With css alone there is only one solution: background-attachment:fixed

This has the down side of not working currectly on some mobile devices.

However if you are willing to use third party libarys and a bit of javascript there are some good solutions already out there

parallax.js Stellar.js

to name a few. Google will grand you more. As of its professional and practical use, is see no problems with either of them.

Upvotes: 1

Firefly
Firefly

Reputation: 428

Use background-attachment: scroll or background-attachment: local rather than background-attachment: fixed

Upvotes: 0

Related Questions