Magento

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

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

ravemaster - 28 November 2010 07: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

brunomarshall - 28 November 2010 07:36 PM

ravemaster - 28 November 2010 07: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

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

To add Background Images to your Magento dynamically and to make them appear based on rules and priority have a look at the Background Images magento module