суббота, 30 марта 2019 г.

How To Create a Full Height Image

15:29 By , , , , No comments


Use 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-position: center;
  background-repeat: no-repeat;
  background-size: cover;}
Try it Yourself »
Half page background image:

Example

.bg { 
    height: 50%; }

0 коммент.:

Отправить комментарий