Set background image according to screen resolution

Question

I would like to be able to change my webpage background image according to the screen resolution the user uses so   if screen resolution is greater than or equal to 1200 600 then background   mybackground jpg no-repeat or else  How can I do this

User · Answer

Delete your  body background image code  then paste this code   html        background  url    img background jpg  no-repeat center center fixed  000       -webkit-background-size  cover      -moz-background-size  cover      -o-background-size  cover      background-size  cover

User · Answer

Put into css file   html   background  url images bg jpg  no-repeat center center fixed  -webkit-background-size  cover  -moz-background-size  cover  -o-background-size  cover  background-size  cover       URL images bg jpg is your background image

User · Answer

I know it s too old question but thought to answer  it might will help someone  If you see twitter  you will find something very tricky but pure css approach to achieve this    lt div class  background  gt  lt img src  home-bg png    gt  lt  div gt  Applied CSS  background       background  none repeat scroll 0 0  FFFFFF      height  200       left  -50       position  fixed      width  200      background img      bottom  0      display  block      left  0      margin  auto      min-height  50       min-width  50       right  0      top  0     This background images fits to all size  even portrait view of ipad  it always adjust the image in center  if you zoom out  image will remain the same

User · Answer

Pure CSS approaches that work very well are discussed here  Two techniques are examined in particular and I personally prefer the second as it not CSS3 dependent  which suits my own needs better    If most all of your traffic has a CSS3 capable browser  the first method is quicker and cleaner to implement  copy pasted by Mr  Zoidberg in another answer here for convenience  though I d visit the source for further background on why it works    An alternative method to CSS is to use the JavaScript library jQuery to detect resolution changes and adjust the image size accordingly  This article covers the jQuery technique and provides a live demo    Supersized is a dedicated JavaScript library designed for static full screen images as well as full sized slideshows   A good tip for full-screen images is to scale them with a correct ratio beforehand  I normally aim for a size of 1500x1000 when using supersized js or 1680x1050 for other methods  setting the jpg quality for photographs to between 60-80  resulting in a file size in the region of 100kb or less if possible without compromising quality too much

User · Answer

Hi heres a javascript version which changes the background image src according to screen resolution  You have to have the different images saved in the right size    lt html gt   lt head gt       lt title gt Javascript Change Div Background Image lt  title gt           lt style type  text css  gt      body            margin 0           width 100            height 100       div1          background-image url  sky jpg        width 100      height 100         p           font-family Verdana          font-weight bold          font-size 11px             lt  style gt        lt script language  javascript  type  text javascript  gt  function changeDivImage              change the image path to a string    var imgPath   new String            imgPath   document getElementById  div1   style backgroundImage       get screen res of customer var custHeight screen height  var custWidth screen width     if their screen width is less than or equal to 640 then use the 640 pic url if  custWidth  lt   640            document getElementById  div1   style backgroundImage    url 640x480 jpg           else if  custWidth  lt   800            document getElementById  div1   style backgroundImage    url 800x600 jpg           else if  custWidth  lt   1024            document getElementById  div1   style backgroundImage    url 1024x768 jpg           else if  custWidth  lt   1280            document getElementById  div1   style backgroundImage    url 1280x960 jpg           else if  custWidth  lt   1600            document getElementById  div1   style backgroundImage    url 1600x1200 jpg           else       document getElementById  div1   style backgroundImage    url graffiti jpg                  if imgPath     url sky jpg      imgPath                                      document getElementById  div1   style backgroundImage    url graffiti jpg                       else                                 document getElementById  div1   style backgroundImage    url sky jpg                             lt  script gt   lt  head gt   lt body onload  changeDivImage    gt                lt div id  div1  gt        lt p gt This Javascript Example will change the background image of lt br   gt HTML Div Tag onload using javascript screen resolution  lt  p gt        lt p gt paragraph lt  p gt   lt  div gt        lt br  gt        lt  body gt   lt  html gt

User · Answer

I ve had this same issue but have now found the resolution for it    The trick is to create a wallpaper image of 1920 1200   When you then apply this wallpaper to the different machines  Windows 7 automatically resizes for best fit   Hope this helps you all

User · Answer

Set body css to       body    background  url    img background jpg  no-repeat center center fixed  000   -webkit-background-size  cover  -moz-background-size  cover  -o-background-size  cover  background-size  cover

[image] Set background image according to screen resolution

Examples related to image

Examples related to background

Examples related to screen

Examples related to resolution