How to make background images responsive

Comments

• Albert

  October 2015

  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
• rinneh

  November 2015

  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.
• Albert

  November 2015

  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
• rinneh

  November 2015 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.
• Albert

  November 2015

  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
• rinneh

  November 2015

  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.
• Albert

  November 2015

  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
• rinneh

  November 2015 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.
• Albert

  November 2015

  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
• rinneh

  November 2015

  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.
• Albert

  November 2015

  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
• rinneh

  November 2015

  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.
• Albert

  November 2015

  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