Fit website background image to screen size

Question

I m just starting on a website and I already encounter a small problem where I can t find a specific solution to   I wanted to make my website background fit any screen size in width  height does not matter   This is the link to my image          IMAGES background jpg   EDIT  I have no idea what s wrong  but for some reason the body doesn t even want to get the background image  It just displays a plain white background   body  background-image url    IMAGES background jpg

User · Answer

width  100   background-image  url  quot images bluedraw jpg quot       background-size  cover

User · Answer

Try this    appBg    background-image  url      img background jpg    background-repeat no-repeat  -webkit-background-size  100  auto  -moz-background-size  100  auto  -o-background-size  100  auto  background-size  100  auto       This one works for me

User · Answer

This worked for me  body     background-image url    IMAGES background jpg     background-position  center center    background-repeat  no-repeat    background-attachment  fixed    background-size  cover

User · Answer

you can  do this with this plugin http   dev andreaseberhard de jquery superbgimage   or      background-image url    IMAGES background jpg       background-repeat no-repeat      background-size cover    with no need the prefixes of browsers  it s all ready suporterd in both of browers

User · Answer

You can try with   appBackground       position  relative      background-image  url      img background jpg        background-repeat no-repeat      background-size 100  100vh      works for me

User · Answer

I found the above solutions didn t work for me  on current versions of firefox and safari at least    In my case I m actually trying to do it with an img tag  not background-image  though it should also work for background-image if you use z-height    lt img  src   url  style  position absolute  top left 0px  width max-height 100   border 0    gt    This scales the image to be  fullscreen   probably breaking the aspect ratio  which was what I wanted to do but had a hard-time finding   It may also work for background-image though I gave up on trying that kind of solution after cover contain didn t work for me     I found contain behaviour didn t seem to match the documentation I could find anywhere - I understood the documentation to say contain should make the largest dimension get contained within the screen  maintained aspect    I found contain always made my image tiny  original image was large    Contain was with some hacks closer to what I wanted than cover  which seems to be that the aspect is maintained but image is scaled to make the smallest-dimension match the screen - i e  always make the image as big as it can until one of the dimensions would go offscreen     I tried a bunch of different things  starting over included  but found height was essentially always ignored and would overflow    I ve been trying to scale a non-widescreen image to be fullscreen on both  broken-aspect is ok for me    Basically  the above is what worked for me  hope it helps someone

User · Answer

You can do it like what I did with my website   background-repeat  no-repeat   background-size  cover

User · Answer

Although there are answers to this your questions but because I was once a victim of this problem and after few search online i was unable to solve it but my fellow hub mate helped me and i feel i should share   Examples explained below    Folders  web-projects project1 imgs-journey png  background-image url    imgs journey png   background-repeat no-repeat  background-size cover    My major points is the dots there if you noticed my journey png is located inside an imgs folder of another folder so you re to add the dot according to the numbers folders where your image is stored  In my case my journey png image is saved in two folders that s why two dot is used  so i think this may be the problem of background images not showing sometimes in our codes  Thanks

User · Answer

Try this  I hope it will help   position  fixed  top  0  width  100   height  100   background-size  cover  background-image  url  background jpg

User · Answer

Try this   background  url    IMAGES background jpg  no-repeat  background-size  auto auto

User · Answer

Background image fix to screens with browser compatibility css   full-screen       height  100       width  100       background-image  url    images banner jpg       background-size  cover      background-position  center        for browser compatibility     -moz-background-size  cover      -webkit-background-size  cover      -o-background-size  cover

User · Answer

Try this      background  url    IMAGES background jpg  no-repeat center center fixed   -webkit-background-size  cover  -moz-background-size  cover  -o-background-size  cover  background-size  cover    For more information   follow this Perfect Full Page Background Image

User · Answer

background  url     image b21 jpg   no-repeat center center fixed   background-size  100  100    height  100    position  absolute    width  100

[html] Fit website background image to screen size

Examples related to html

Examples related to css

Examples related to background

Examples related to size

Examples related to responsive