Hi

 

Could you provide me with the code to centre a background image on my home page so that its aspect ratio is the same on different browsers? Say, its height is always a certain percentage of the height of whatever the browser is?

 

Thank you

sabatier

Have a look at this. Drag the window wider and narrower to see the background keep full width and keep its aspect ratio:-

http://www.wickham43.net/backgroundfullwidthflexible.html

 

You could try top: 0; bottom: 0; and delete left: 0; right: 0; to fix the height as 100% of the window height instead of fixing the width to 100% of the window width, but I haven't tried it.

Have a look at this. Drag the window wider and narrower to see the background keep full width and keep its aspect ratio:-

http://www.wickham43.net/backgroundfullwidthflexible.html

 

You could try top: 0; bottom: 0; and delete left: 0; right: 0; to fix the height as 100% of the window height instead of fixing the width to 100% of the window width, but I haven't tried it.

 

yeah that would probably suit me. Cheers!

ok that seems fine. Now how do i make it centred (if i don't want it to take up the whole page)?

 

Thanks

In my code this works:-

.background { width: 80%; position: fixed; left: 10%; right: 10%; top: 0; 
z-index: -1; }

 

instead of

.background { width: 100%; position: fixed; left: 0; right: 0; top: 0; 
z-index: -1; }

 

The height is always in proportion to the varying width.

 

It also works with height :-

.background { height: 80%; position: fixed; top: 10%; bottom: 10%;
z-index: -1; }

 

and the width adjusts in proportion to varying height but it sticks to the left side. If you code left: 10% the right side could be anything. If you also code right: 10% the image will be distorted because it will be fixed to four sides and I can't solve that.