Advanced Search

CSS3 fullscreen background image - contain and cover options

/ Published in: CSS
Save to your folder(s)
"Contain" maintains aspect ratio of the image while giving a full screen - will scale down but wont scale up beyond 100% of its own dimensions and doesn't repeat by default
"Cover" will crop either crop or stretch the image to cover the full screen - seems to be setting image to 100% of screen size regardless of browser window size

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. body{
  2.      background-image: url(../images/bg.jpg);
  3.      background-repeat: no-repeat;
  4.      background-color: #000;
  5.      background-size:contain;
  6. }
  7.  
  8. body{
  9.      background-image: url(../images/bg.jpg);
  10.      background-repeat: no-repeat;
  11.      background-color: #000;
  12.      background-size:cover;
  13. }
  14.  
  15. /* best choice below */
  16.  
  17. @media screen and (max-width: 1024px) { /* Specific to this particular image */
  18.   img.bg {
  19.     left: 50%;
  20.     margin-left: -512px;   /* 50% */
  21.   }
  22. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.