Backstretch Image Not resizing with browser

This topic contains 5 replies, has 3 voices, and was last updated by  Paolo 9 years, 8 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • August 8, 2015 at 3:38 pm #48693

    doublefish
    Expired Member
    Post count: 53

    Hi guys,

    The custom background image using backstretch is not resizing on mobile.

    Any ideas?

    Any help would be much appreciated.

    Thanks

    August 8, 2015 at 3:40 pm #48694

    doublefish
    Expired Member
    Post count: 53
    This reply has been marked as private.
    August 8, 2015 at 6:26 pm #48714

    Paolo
    Site Admin
    Post count: 31211

    Hi,

    which custom background image and what is backstretch?

    let us know,

    Thanks

    August 8, 2015 at 7:20 pm #48716

    doublefish
    Expired Member
    Post count: 53

    Hey Paolo,

    Thanks for responding.

    The background image I’m referring to is the “Home Background” image under …
    Appearance > Customize > Home Background

    I need it to be responsive and resize depending on the viewport size. The only class I see is backstretch

    Backstretch is jQuery that dynamically-resizes background images. The image will stretch to fit the page, and will automatically resize as the window size changes. I’m not really familiar with it other than knowing it exists. I guess it would be similar to the effect of using “background-size: contain;”??

    It’s nothing I installed. It’s part of your theme. Uses a class of “.backstretch”.

    After some poking around I read a couple “solutions” but none that seemed to work for me.

    1. Maybe jQuery is being called twice. (I don’t know how to tell)
    2. Using the following to target the different min-widths and min-heights…

    

    @media (min-width:800px) {.backstretch {
   min-height: 400px!important;
}}
@media (min-width:1000px) {.backstretch {
   min-height: 450px!important;
}}
@media (min-width:12px) {.backstretch {
   min-height: 500px!important;
}}
    

    Anyway, the image does cover the background but it does not resize depending on view port size. I was hoping you or someone on your team could help 🙂
    

		
	
    


    

			
				

    

	
    

		August 8, 2015 at 11:32 pm

		
		#48720

		
		
		
	
    


    


    

	
    

		
		
    Guust
    Moderator
    
		
		
     Post count: 29970
    
	
    

	
    

		
		
    Try this:
    

    

    body.custom-background {
    background-image: url('/yourimage');
    background-size: contain;
}
    

		
	
    


    

			
				

    

	
    

		August 10, 2015 at 3:04 pm

		
		#48856

		
		
		
	
    


    


    

	
    

		
		
    Paolo
    Site Admin
    
		
		
     Post count: 31211
    
	
    

	
    

		
		
    Personally when I need a responsive background image I use background-size: cover; as explained on this tutorial: https://css-tricks.com/perfect-full-page-background-image/
    

    However Guust suggestion should be good too.
    

    Let us know,
    

    Thanks
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 6 posts - 1 through 6 (of 6 total)
	


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket
				

			

		

		
	
	


			

			


		
	


		

	

	


















	
	
			
			
			
			
                        
            
            
                
                

                    

                        20% Discount Offer
                        
                        
                    

                    

                        Hurry! Get your 20% discount before it expires.
                        Get 20% Discount