Responsive css background images

by

If you want the same image to scale based on the size of the browser window:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Do not set width, height, or margins.

EDIT:
The previous line about not setting width, height or margin refers to OP’s original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.

More Related Contents:

  1. How to apply a CSS filter to a background image
  2. Can I have multiple background images using CSS?
  3. CSS3 background image transition
  4. Responsive font size in CSS
  5. Why does the order of media queries matter in CSS?
  6. How to reference JSF image resource as CSS background image url
  7. Making an iframe responsive
  8. How to add a color overlay to a background image? [duplicate]
  9. IE 8: background-size fix [duplicate]
  10. Common CSS Media Queries Break Points [duplicate]
  11. Responsive CSS triangle with percents width
  12. Swap DIV position with CSS only
  13. How to scale CSS sprites when used as background-image?
  14. How to style a div to be a responsive square? [duplicate]
  15. Change the order of col-*-12 columns in Bootstrap using push/pull
  16. Maintain aspect ratio according to width and height
  17. Google chrome a:visited background image not working
  18. How to make a element expand or contract to its parent container?
  19. Responsive Images with CSS
  20. Which are the most important media queries to use in creating mobile responsive design?
  21. Background images: how to fill whole div if image is small and vice versa
  22. Maintain div aspect ratio according to height
  23. Set div height equal to screen size
  24. Animate CSS background-position with smooth results (sub-pixel animation)
  25. How can I avoid media query overlap?
  26. In a bootstrap responsive page how to center a div
  27. Single vs multiple stylesheets in responsive web design
  28. Sass and rounding down numbers. Can this be configured?
  29. Media Queries – Mobile vs Desktop Browser
  30. (Really) Long Background Image Does Not Render on iPad Safari

Leave a Comment