Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Parallax effect to match background image and container

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #244804
    mlithvall
    Participant

    Hi,

    I’m creating a website with parallax effect and have one quite long “About” section with an image as a background. The parallax effect makes this backgorund scale up so it looks pixelated while the resolution works when I’ve tried to set the background image to “contain” (tried in “inspect elements” as I can’t seen to change the background size in visual composer, where the background seems to be set to “cover” by default)
    Is there any way to set this background to “contain” and make the parallax effect move faster in this specific section so it fits into the background? I’ve been looking at the code and when I change:

    .no-touch .header-parallax > .header-bg-wrapper > .header-bg:not(.header-carousel-wrapper), .no-touch .header-parallax > .header-bg-wrapper > .header-bg.header-carousel-wrapper .t-background-cover {
    height: calc(100% + 200vh);
    }

    element.style {
    background-image: url(http://mlithvall.com/wp-content/uploads/2015/06/estland_bakgrund_2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    }

    it helps a bit but I end up with a “white space” at the bottom of my section as “200vh” doesn’t seem to be enough of speed (and I can’t put in a higher value – is there a limit somewhere?) Plus if I change the parallax effect like this, it effects all my parallax effects.. I’ve named my background a div class to be “aboutbackground”.

    How do I get this to work?!

    Here’s a link to my site: http://mlithvall.com/?page_id=21524&preview_id=21524&preview_nonce=26316dca7c&_thumbnail_id=-1&preview=true

    Best,
    Madeleine

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.