Responsive css background images

Question

I have a website  g-floors eu  and I want to make the background  in css I have defined a bg-image for the content  also responsive  Unfortunately I really don t have any idea on how to do this except for one thing that I can think of but it s quite a workaround  Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this   Basically what I wanna achieve is that the image  with the watermark  G   automatically resizes without displaying less of the image  If it s possible of course  link  g-floors eu  Code I have so far  content part    content     background-image  url     images bg png      background-repeat  no-repeat    position  relative    width  85     height  610px    margin-left  auto    margin-right  auto

User · Accepted Answer

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.

User · Answer

You can use this  I have tested and its working 100  correct   background-image url     images bg png     background-repeat no-repeat  background-size 100   background-position center    You can test your website with responsiveness at this Screen Size Simulator      http   www infobyip com testwebsiteresolution php  Clear Your cache each time you make changes and i would prefer to use Firefox to test it   If you want to use an Image form other site URL and not like  background-image url     images bg png      This structure is to use the image from your own hosted server  Then use like this  background-image  url http   173 254 28 15  brettedm wp-content uploads Brett-Edmonds-Photography-14 jpg     Enjoy

User · Answer

Here is the best way i got    content         background-image url  smiley gif        background-repeat no-repeat      background-size cover      Check on the w3schools  More Available options   background-size  auto length cover contain initial inherit

User · Answer

Try using background-size but using TWO ARGUMENTS One for the width and the other one for the height  background-image url     images bg png     background-repeat no-repeat  background-size  100  100      Here the first argument will be the width     and the second will be the height  background-position center

User · Answer

I used    content     width  100     height  500px    background-size  cover    background-position  center top      which worked really well

User · Answer

This is an easy one     body       background-image  url http   domains com photo jpeg       background-position  center center      background-repeat  no-repeat      background-attachment  fixed      background-size  cover      Take a look at the jsFiddle demo

User · Answer

container       background-image  url     images layout bg png        background-repeat  no-repeat      background-size  100  100       height  100vh      margin  3px auto 0      position  relative

User · Answer

If you want the entire image to show irrespective of the aspect ratio  then try this   background-image url     images bg png    background-repeat no-repeat  background-size 100  100   background-position center    This will show the entire image no matter what the screen size

User · Answer

background url  img content-bg jpg   no-repeat  background-position center   background-size cover    or   background-size 100

User · Answer

by this code your background image go center and fix it size whatever your div size change   good for small   big   normal sizes   best for all   i use it for my projects where my background size or div size can change  background-repeat no-repeat  -webkit-background-size cover  -moz-background-size cover  -o-background-size cover  background-size cover  background-position center

User · Answer

background  url  static media group3x 6bb50026 jpg   background-size  contain  background-repeat  no-repeat  background-position  top    the position property can be used to align top bottom and center as per your need and background-size can be used for center crop cover  or full image contain or 100

User · Answer

Here is sass mixin for responsive background image that I use  It works for any block element  Of course the same can work in plain CSS you will just have to calculate padding manually    mixin responsive-bg-image  image-width   image-height      background-size  100     height  0    padding-bottom  percentage  image-height    image-width     display  block       my-element     background  url  images my-image png   no-repeat        substitute for your image dimensions    include responsive-bg-image 204  81       Example http   jsfiddle net XbEdW 1

User · Answer

I think  the best way to do it is this   body       font-family  Arial Verdana sans-serif      background url   images image jpg   no-repeat fixed bottom right transparent      In this way there s no need to do nothing more and it s quite simple    At least  it works for me   I hope it helps

User · Answer

Try this    background-image  url  images bg png   background-repeat  no-repeat  background-position  center center  background-attachment  fixed  background-size  cover

User · Answer

CSS   background-size  100     That should do the trick

User · Answer

Just two lines of code  it works    content     background-image  url     images bg png      background-size  cover

User · Answer

Responsive website by add padding into bottom image height width x 100   padding-bottom     http   www outsidethebracket com responsive-web-design-fluid-background-images     More complicated method   http   voormedia com blog 2012 11 responsive-background-images-with-fixed-or-fluid-aspect-ratios    Try to resize background eq Firefox Ctrl   M to see magic nice script i think best one   http   www minimit com demos fullscreen-backgrounds-with-centered-content

User · Answer

Adaptive for square ratio with jQuery  var Height     window  height    var Width     window  width    var HW   Width Height   if HW lt 1             background   css  background-size   auto 100               else if HW gt 1             background   css  background-size   100  auto

User · Answer

lt style gt                  padding  0    margin  0    box-sizing  border-box      res img     background  url  https   s15 postimg org ve2qzi01n image slider 1 jpg      width  100     height  500px    background-repeat  no-repeat    background-size  100  100     background-position  center    border  1px solid red      media screen and  min-width 300px  and  max-width 500px       res img       width  100       height  200px              lt  style gt    lt div id  res img  gt   lt  div gt

[css] Responsive css background images

Examples related to css

Examples related to responsive-design

Examples related to background-image

Examples related to image-resizing