How To Create a Full Page Image | w3school header image
LearnhowtocreateafullpagebackgroundimagewithCSS.FullPageImageLearnhowtocreateabackgroundimagethatcoverstheentirebrowserwindow.Thefollowingexampleshowsafull-screen(andahalf-screen)responsivebackgroundimage:Demo-Fullpagebackgroundimage[1]Demo-Halfpagebackgroundimage[2]HowToCreateaFullHeightImageUseacontainerelementandaddabackgroundimagetothecontainerwithheight:100%.Tip:Use50%tocreateahalfpagebackgroundimage.Thenusethefollowingbackgroundpropertiestocenterandscaletheimageperfectly:Note:Tomakesur...
Learn how to create a full page background image with CSS.
Full Page ImageLearn how to create a background image that covers the entire browser window. The following example shows a full-screen (and a half-screen) responsive background image:
Demo - Full page background image[1]
Demo - Half page background image[2]
How To Create a Full Height ImageUse a container element and add a background image to the container with height: 100%. Tip: Use 50% to create a half page background image. Then use the following background properties to center and scale the image perfectly:
Note: To make sure that the image covers the whole screen, you must also apply height: 100% to both <html> and <body>:
Example body, html { height: 100%;}.bg { /* The image used */ background-image: url("img_girl.jpg");
/* Full height */ height: 100%;
/* Center and scale the image nicely */ background-pos...