Mobile Friendly Website


Doing it with style

CSS DEMOSResponsive full screen foreground image 'cover'

Date : 1st June 2015

For all modern browsers

click for full page image click for full page image


As promised, a follow on from the previous demo to show how to have a foreground image 'cover' the browser window and be responsive without using @media queries.

No doubt you have seen how background images can be styled to be 'contained' and 'covered' within the parent element using CSS background-size, and some of you may have seen that you can also have a foreground image 'contained' and 'covered' within its box using CSS object-fit. BUT object-fit is not supported in any version of IE.

Just click either image above to open a full screen page with the image centered and contained within the page. The first image is in landscape format and the second portrait format

Resize your browser window when showing a full screen image to see it stay centered, covering the screen and maintain its aspect ratio.

I have also added a caption for each image which automatically sizes to fit the window.

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page