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 · 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

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

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

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

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

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

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

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

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

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 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

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

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

User · 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

CSS   background-size  100     That should do the trick

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

[css] Responsive css background images

Examples related to css

Examples related to responsive-design

Examples related to background-image

Examples related to image-resizing