Fullscreen responsive background image in CSS

by

jsBin demo

background: url(image.jpg) fixed 50%;
background-size: cover;                 /* PS: Use separately here cause of Safari bug */

The fixed (background-attachment) is optional.

The above is just a shorthand for:

background-image      : url(image.jpg);
background-attachment : fixed;
background-position   : 50% 50%;     /* or: center center */
background-size       : cover;       /* CSS3 */

You’ve could in all modern browsers but Safari use: 

background: url(image.jpg) fixed 50% / cover;

where the / is used in background shorthand to separate and distinguish position from size (cause position accepts both single and multiple (X,Y) values), but Safari has a bug with this / shorthand so use as described above.

More Related Contents:

  1. When to use IMG vs. CSS background-image?
  2. Fill SVG path element with a background-image
  3. CSS Display an Image Resized and Cropped
  4. Image inside div has extra space below the image
  5. Can I set an opacity only to the background image of a div?
  6. What is the effect of encoding an image in base64?
  7. Is there an equivalent to background-size: cover and contain for image elements?
  8. Removing whitespace between HTML elements when using line breaks
  9. CSS set background-image by data-image attr
  10. Fit background image to div
  11. Make an image responsive – the simplest way [duplicate]
  12. How can I make all images of different height and width the same via CSS?
  13. How can I display just a portion of an image in HTML/CSS?
  14. CSS image resize issue
  15. Floating an image to the bottom right with text wrapping around
  16. Scale image to fit a bounding box
  17. img tag displays wrong orientation
  18. How does one use the onerror attribute of an img element
  19. Image scaling causes poor quality in firefox/internet explorer but not chrome
  20. CSS: stretching background image to 100% width and height of screen?
  21. How to strike through obliquely with css
  22. How can I resize an image to a percentage of itself with CSS?
  23. CSS align images and text on same line
  24. How to auto-resize an image while maintaining aspect ratio
  25. How do I stretch a background image to cover the entire HTML element?
  26. Can I use an image from my local file system as background in HTML? [duplicate]
  27. How to place Text and an Image next to each other in HTML?
  28. Make Bootstrap’s Carousel both center AND responsive?
  29. Use the HTML tag as a background image instead of the CSS background-image property?
  30. Is it possible to set a src attribute of an img tag in CSS?

Leave a Comment