How to make full screen background in a web page

Question

How to make an image as background for web page  regardless of the screen size displaying this web page  I want to display it properly  How

User · Accepted Answer

Via jQuery plugins      http   srobbin com jquery-plugins backstretch  http   buildinternet com project supersized

User · Answer

A quick search for keywords background generator shows this CSS3 produced background pattern that s dynamically created   By keeping the image small and repeatable  you won t have problems with it loading on mobile devices and the small image file-size takes care of memory concerns   Here s the markup for the head section    lt style type  text css  gt       body         background-image url  path to your image background png          width  100         height  100           lt  style gt    If your going to use an image of something that should preserve aspect ratio  such as people or objects  then you don t want 100  for width and height since that will stretch the image out of proportion  Instead check out this quick tutorial that shows different methods for applying background images using CSS

User · Answer

CSS   bbg           The image used        background-image  url                 Full height        height  100            Center and scale the image nicely        background-position  center      background-repeat  no-repeat      background-size  cover          HTML   lt  doctype html gt   lt html class  h-100  gt         lt body class  bbg  gt   lt  body gt         lt  html gt

User · Answer

its very simple use this css  replace image jpg with your background image   body height 100      width 100      background-image url image jpg    your background image        background-repeat no-repeat   we want to have one single image not a repeated one        background-size cover   this sets the image to fullscreen covering the whole screen          css hack for ie           filter progid DXImageTransform Microsoft AlphaImageLoader src   image jpg  sizingMethod  scale       -ms-filter  progid DXImageTransform Microsoft AlphaImageLoader src  image jpg  sizingMethod  scale

User · Answer

I have followed this tutorial  https   css-tricks com perfect-full-page-background-image   Specifically  the first Demo was the one that helped me out a lot   CSS        background  url images bg jpg  no-repeat center center fixed      -webkit-background-size  cover      -webkit-background-size  cover      -moz-background-size  cover      -o-background-size  cover      background-size  cover       this might help

User · Answer

I found the reason why there is always a white boder of the background image  if I put the image in a  div  element inside  body   But the image can be full screen  if I put it as background image of  body    Because the default  margin  of  body  is not zero  After add this css  the background image can be full screen even I  put it in  div    body       margin  0px

User · Answer

Use this CSS to make full screen backgound in a web page   body       margin 0      padding 0      background url  https   static vecteezy com system resources previews 000 106 719 original vector-abstract-blue-wave-background jpg   no-repeat center center fixed      -webkit-background-size  cover      -moz-background-size  cover      -o-background-size  cover      background-size  cover

User · Answer

Make a div 100  wide and 100  high  Then set a background image

User · Answer

Use the following code in your CSS   x000D   x000D  html    x000D    background  url images bg jpg  no-repeat center center fixed   x000D    -webkit-background-size  cover  x000D    -moz-background-size  cover  x000D    -o-background-size  cover  x000D    background-size  cover  x000D    x000D   x000D   x000D   here s the link where i found it

User · Answer

um why not just set an image to the bottom layer and forgo all the annoyances   lt img src  yourmom png  style  position fixed top 0px left 0px width 100  height 100  z-index -1   gt

[html] How to make full screen background in a web page

Examples related to html

Examples related to css

Examples related to web