Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Best way to add dynamic resizing background image
 
supert56
Jr. Member
 
Total Posts:  22
Joined:  2009-08-04
 

Hi Everyone,

Apologies if this has been answered before but having looked through the forums I can’t seem to find an answer.

I am looking to redesign my website and add in a dynamic resizing background image that will always be 100% of the browser width and height without any pixelation. I know roughly how to do this when creating more simple websites but am struggling to implement it on Magento.

As an example of what I mean I ahve found this site http://www.ringvemedia.com

My current site in development is http://www.slippcases.com

Any advice people can offer would be very much appreciated!

Thanks again,

Tom

 
Magento Community Magento Community
Magento Community
Magento Community
 
ravemaster
Jr. Member
 
Total Posts:  9
Joined:  2010-06-19
 

A quick google with “resize background” will get you this link

http://css-tricks.com/how-to-resizeable-background-image/

Scroll to the last

Edit
Btw, to achieve “no pixelation”, you can use a large image or dynamically replace the image with a larger one using javascript when the window size exceed certain amount

 
Magento Community Magento Community
Magento Community
Magento Community
 
brunomarshall
Guru
 
Avatar
Total Posts:  367
Joined:  2009-08-04
 
ravemaster - 28 November 2010 06:09 PM

A quick google with “resize background” will get you this link

http://css-tricks.com/how-to-resizeable-background-image/

Scroll to the last

Edit
Btw, to achieve “no pixelation”, you can use a large image or dynamically replace the image with a larger one using javascript when the window size exceed certain amount

Hello ,
i think there is mo need for using javascript for no pixalaion just we can add larger background image and it will never create a scroll as it is applied as background

 
Magento Community Magento Community
Magento Community
Magento Community
 
ravemaster
Jr. Member
 
Total Posts:  9
Joined:  2010-06-19
 
brunomarshall - 28 November 2010 06:36 PM

ravemaster - 28 November 2010 06:09 PM
A quick google with “resize background” will get you this link

http://css-tricks.com/how-to-resizeable-background-image/

Scroll to the last

Edit
Btw, to achieve “no pixelation”, you can use a large image or dynamically replace the image with a larger one using javascript when the window size exceed certain amount

Hello ,
i think there is mo need for using javascript for no pixalaion just we can add larger background image and it will never create a scroll as it is applied as background

Thats why i use “or”. Loading a very big image (1920*1080) may not be efficient for user with a screen size of (1280*768). Using script, we can load the correct image when the window or the screen is a larger one. Of course if the designer care about the loading speed at all smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
supert56
Jr. Member
 
Total Posts:  22
Joined:  2009-08-04
 

Hi both,

Thanks so much for your replies. I have taken a look at the link provided and am definitely going to give it a go with the 3rd CSS based option. Will this require that the image is hard coded using into the landing page or can I somehow resize the image that is sourced from within the CSS.

For example is it possible to resize an image that is being pulled in using CSS ike below:

.wrapper {
background-image: url(../img/"whatever the image is called")
}

Thanks for all your help!

Tom smile

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top