New Landing › How can we help? › Themeforest Theme Support › Dante › What size should the parallax background upload be to avoid distortion?

Viewing 13 posts - 1 through 13 (of 13 total)
  • Back to forum
    Posted in: Dante
  • August 20, 2014 at 6:15 pm #102778
    sakirose
    Member
    Post count: 96

    What size should the parallax background upload be to avoid distortion? I’ve tried a few different sizes and they always get distorted. If you have any guidelines, that would be appreciated. Please see attached images for explanation of question:

    Attachments:
    You must be logged in to view attached files.
    August 21, 2014 at 9:09 am #102960
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    Will have to forward this one to the Developer so he can give you the correct answer.

    -Rui

    August 22, 2014 at 2:32 am #103239
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Hi there,

    The background image will scale to cover the area, what resolution is your browser window to see it distort? Seems fine here!

    – Ed

    August 25, 2014 at 3:15 am #103672
    sakirose
    Member
    Post count: 96

    Well, what’s happening is that I’ll put a large image, but the parallax functionality causes it to zoom in too far. Is there any documentation that would explain how it crops, resizes and optimal sizes? For example, if I want a persons head on the initial screen, but it get cut off.

    I’d just like to avoid stretching an image too much or zooming in. I purposely use larger image so it does not have to do that, but it doesn’t work so I must not understand what size and composition of the background image.

    August 25, 2014 at 3:55 am #103682
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Try adding this custom css:

    .spb_parallax_asset.parallax-fixed {
background-attachment: local;
}

    That will set the size local to the asset size, rather than the browser size. Let me know if that works better for you!

    – Ed

    August 25, 2014 at 2:22 pm #103810
    sakirose
    Member
    Post count: 96

    How would I set that for just the first parallax image on my home page?

    August 25, 2014 at 4:31 pm #103830
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    In your the parallax element you want to change the css, add a new css parameter in the extra class like in the attached image.

    https://www.dropbox.com/s/26cq13tlynh1pya/homepage-parallax.png?dl=0

    Then it’s necessary to adjust the code provided by Ed to this one.
    In the example bellow I added a extra class name called “my-homepage-parallax”

    
.spb_parallax_asset.parallax-fixed.my-homepage-parallax {
background-attachment: local;
}

    Let us know if it worked

    -Rui

    August 25, 2014 at 5:08 pm #103840
    sakirose
    Member
    Post count: 96

    Do I need to put the . in the css parameter or leave it out the way you did?

    Also in the actual css, is the .my-homepage-parallax directly connected to .spb_parallax_asset.parallax-fixed or do I leave a space like this:

    .spb_parallax_asset.parallax-fixed .my-homepage-parallax

    August 25, 2014 at 10:40 pm #103922
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    In the asset extra class you add: my-homepage-parallax

    Then you add the custom css above, as it is – that is correct.

    – Ed

    August 26, 2014 at 4:20 am #104016
    sakirose
    Member
    Post count: 96

    So with a space like this?

    .spb_parallax_asset.parallax-fixed .my-homepage-parallax (See the space?)

    August 26, 2014 at 4:23 am #104017
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    No, the code you add to the custom css box in theme options should be as Rui posted:

    .spb_parallax_asset.parallax-fixed.my-homepage-parallax {
background-attachment: local;
}

    – Ed

    August 26, 2014 at 4:45 am #104021
    sakirose
    Member
    Post count: 96

    ALSO, is there a way to have the top of the horizontal image be aligned with the top of the available space so the head of the person in the image doesn’t get cropped?

    Basically, I need the top edge of the image to be shown and not cropped when people land on the home page. I’m using a weird hack with photoshop that I’d prefer not.

    August 26, 2014 at 5:09 pm #104262
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Like you did with the last asset, add the following extra class: parallax-top

    then this custom css:

    .spb_parallax_asset.parallax-top {
background-position: center top;
}
  • Back to forum
    Posted in: Dante
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register