Support Center Visit Demo License manager Buy @ envato

How to make background images responsive

rinnehrinneh
in Theme support
Hi,

Until the latest upgrade I used the parallax function for backgrounds on fullscreen page sections which made the images responsive but also added a responsive functionality to these images that made them fill up the background regardless of resolution.

But with the latest update of Betheme the parallax effect has been changed and now creates empty spaces while scrolling. To fix this i was thinking of just to move away from the parallax effect and let the backgrounds fill up these page sections. But the backgrounds do not scale with the resolution, making them too big for lower resolution screens and creating white spaces on higher resolution screens.

How can I enable the function that background images always fill the page section regardless of resolution.. Pretty much just "background-size: cover". For some reason if I try to custom css that part it doesnt work with this theme.

Thanks in advance!

ps. It would be nice if we can adjust the parallax scrolling speed.

Comments

  • AlbertAlbert
    Hey,

    like you wrote, we made new parallax feature because previous one wasn't good for Chrome and that's the reason why we decided to make a new one. Will be great if you can send us url to page where you got a problem with parallax now and we'll check what could be wrong because we did tested it on our new demos where all is fine.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rinnehrinneh
    Hi,
    Thank you for your response. It is not really like that the parallax does not work. but it works different than before with a much bigger speed than before. So If i scroll now the parallax movement brings the background much lower than before and thus hurting the layout that I have built before the update. But this is okay. But how can I make the section backgrounds be responsive and always fill the screen? If I give a section a background now of for example 1920x1080 pixels, it is screen filling at that resolution. If I open that section on a 1280x720 onitor, the image will be cropped instead of begin responsive and scaling to the lower resolution.

    So now I wonder how I can enable the fill function in this theme for background images. Parallax sections do scale with the resolution.
  • AlbertAlbert
    Backgrounds were made with CSS which is incompatible with responsive mode. It was working exactly the same in the past. However, if you prefer previous parallax feature, with next update we'll add an option to switch between old and new parallax features.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rinnehrinneh
    edited November 2015
    Sorry i think there is maybe a small misunderstanding about my question.

    I used the old parallax feature because it would make the background responsive and stretch to the viewport resolution. But using a normal background does not do this. so how can i enable it without the parallax function? I only used the past parallax function for that. But the new parallax reversed the scrolling direction of the background which ruined the layout. But the speed is better. The old parallax wa terribly slowing down performance on tablets and other lower specced devices.
  • AlbertAlbert
    You're asking to make parallax responsive but like we wrote above, it is impossible. So or we do not understand what you mean or you are asking for parallax being responsive what is not possible.

    P.S. With next update we'll add previous parallax feature as well so you can choose if you want to use old or new parallax feature.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rinnehrinneh
    Hmm there really is a misunderstanding. sorry

    In the past I always used the parallax feature because when using a parallax background is automatically becomes responsive and scales to the viewport. (I use fullscreen sections combined with parallax)

    But because the new parallax system changes how the parallax scrolls and ruins my layout. I decided to stop using the parallax function for the background because of it.

    So to fix the layout problem I wanted to use just backgrounds for full screen sections. But a static background does not scale in Betheme according to the viewport. So how can I enable this?

    The function I want to use in code is "background-size: cover;" so it becomes responsive. But I cannotseem to apply it anywhere in the theme to make it work.
  • AlbertAlbert
    Can you show us example of parallax section which is responsive? You can pick up any of our demos to show us where parallax is responsive. Also, please send us url to your site where you got background images and they are not responsive.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rinnehrinneh
    edited November 2015
    i want to implement "background-size: cover" for a normal background image like the parallax backgrounds have.

    It works with the parallax backgrounds but not with static background images.
  • AlbertAlbert
    Ok, but like we wrote above, we need url to your site where you got this background image because we must have a look on it.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rinnehrinneh
    The part that i want to make responsive for example is the first background image you see on this link http://www.ydenjuicer.com/

    In the past this was a parallax background but that does not look good anymore with the current parallax system so i decided also for speed reasons to make this a static background but it needs to be responsive as well and scale according to the viewport.
  • AlbertAlbert
    Ok. So if you want to add cover background size per sections, you must set Custom | Classes names for example: background-cover and then under Theme options > Custom CSS & JS > Custom CSS section, write below css: 
    section.background-cover { background-size: cover !important; }
    Also, instead of custom css's, you can use Center No-Repeat Fixed Cover background position for section.

    P.S. New version of theme, where you can switch between old and new parallaxes is ready for download on TF.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rinnehrinneh
    thank you for your code, unfortunately it also doesnt work it was similar to mine. but for some reason it does not scale when making the viewport smaller.
  • AlbertAlbert
    We did tested this on our side and it works. If it does not work for you, it means that you did something wrong. Please send us url to page where you set this background size and we'll have a look.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.