how to set the background image fit to browser using html

Question

I have made a simple login page and set an image as background but it is not fitting to browser screen I am using html for this purpose what should I do fit the image to browser screen Kindly please describe in detail    lt    page language  java  contentType  text html  charset ISO-8859-1  pageEncoding  ISO-8859-1   gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01Transitional   EN  http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset ISO-8859-1  gt   lt title gt JSP Page lt  title gt   lt  head gt   lt body gt   lt h1 gt Login Page lt  h1 gt   lt center gt   lt h2 gt SignUp Details lt  h2 gt    lt body background  Indian wallpapers 205 jpg  gt   lt form action  LoginCheck jsp method  post  gt   lt  br gt Username  lt input type  text  name  username  gt   lt  br gt Password  lt input type  password  name  password  gt   lt  br gt   lt input type  submit  value  Submit  gt   lt  form gt   lt  center gt    lt  body gt   lt  html gt

User · Answer

Some answers already pointed out background-size  cover is useful in the case  but none points out the browser support details  Here it is   Add this CSS into your stylesheet   body       background  url background jpg  no-repeat center center fixed      background-size  cover     for IE9   Safari 4 1   Chrome 3 0   Firefox 3 6         -webkit-background-size  cover     for Safari 3 0 - 4 0   Chrome 1 0 - 3 0        -moz-background-size  cover     optional for Firefox 3 6         -o-background-size  cover     for Opera 9 5        margin  0     to remove the default white margin of body        padding  0     to remove the default white margin of body        -moz-background-size  cover  is optional for Firefox  as Firefox starts supporting the value cover since version 3 6  If you need to support Konqueror 3 5 4  as well  add -khtml-background-size  cover    As you re using CSS3  it s suggested to change your DOCTYPE to HTML5  Also  HTML5 CSS Reset stylesheet is suggested to be added BEFORE your our stylesheet to provide a consistent look  amp  feel for modern browsers   Reference  background-size at MDN  If you ever need to support old browsers like IE 8 or below  you can still go for Javascript way  scroll down to jQuery section     Last  if you predict your users will use mobile phones to browse your website  do not use the same background image for mobile web  as your desktop image is probably large in file size  which will be a burden to mobile network usage  Use media query to branch CSS

User · Answer

body       position  fixed     fixes the image in background       top  0    fixes the image at top       left  0    fixes the image at left       min-width  100     fixes the image width to 100  of screen       min-height  100     fixes the image height to 100  of screen

User · Answer

use background size  cover property   it will be full screen    body  background-size  cover          -webkit-background-size  cover          -moz-background-size  cover          -o-background-size  cover      here is fiddle link

User · Answer

HTML   lt img src  images bg jpg  id  bg  alt    gt    CSS   bg     position  fixed     top  0     left  0         Preserve aspet ratio      min-width  100     min-height  100

User · Answer

I encounter same trouble as you  this is my solution   body       background-image  url image background jpg       background-size  100  100

User · Answer

Try This Code    It may help you    lt html gt       lt head gt   lt style gt      body                       background url  images top-left jpg   no-repeat center center fixed              background-size  cover              -webkit-background-size  cover              -moz-background-size  cover              -o-background-size  cover              margin  0              padding  0                  lt  style gt   lt  head gt       lt body gt       lt form action  LoginCheck jsp method  post  gt       lt  br gt Username  lt input type  text  name  username  gt       lt  br gt Password  lt input type  password  name  password  gt       lt  br gt       lt input type  submit  value  Submit  gt       lt  form gt       lt  center gt        lt  body gt     lt  html gt

User · Answer

add this css in your stylesheet     body               background url Desert jpg  no-repeat center center fixed          background-size  cover          -webkit-background-size  cover          -moz-background-size  cover          -o-background-size  cover          margin  0          padding  0          FIDDLE

User · Answer

You can achieved what you want by creating a  css file and link to your  lt head gt  tag just after the  lt  title gt   closing title tag    Hi-Resolution image will be good to use  around 2112x1584 pixels but consider the file size because it will matter for the page load time   On the opening of your  lt body gt  tag  just delete the background property as it will be declared through the  css file   When your image is ready  put this code to your  css file   body   background-image  url imagePAth Indian wallpapers 205 jpg     You will specify your image path here     -moz-background-size  cover  -webkit-background-size  cover  background-size  cover  background-position  top center  important  background-repeat  no-repeat  important  background-attachment  fixed      When your  css file is done  you can link it to the  lt head gt  tag  It will look something like this   lt link rel  stylesheet  type  text css  href  yourCSSpath yourCSSname css    gt   That s how i make a background image to fit the browser screen

User · Answer

Found an easier way to set it  Here s the html and css    lt style gt       body            background  url    Images abcd jpg  no-repeat center center fixed     For IE 6 and 7            -webkit-background-size  cover          -moz-background-size  cover          -o-background-size  cover          background-size  cover         lt  style gt    lt body id  body  gt       lt nav class  navbar navbar-default  id  navColour  gt           lt div class  container-fluid  gt               lt div class  navbar-header  gt                   lt a id  clr  class  navbar-brand  href     gt Summer Haze Festival lt  a gt               lt  div gt               lt div gt                   lt ul class  nav navbar-nav   gt                       lt li id  clr  class  active  gt  lt a href     gt Home lt  a gt  lt  li gt                       lt li id  clr  gt  lt a href     gt Page 1 lt  a gt  lt  li gt                       lt li id  clr  gt  lt a href     gt Page 2 lt  a gt  lt  li gt                       lt li id  clr  gt  lt a href     gt Page 3 lt  a gt  lt  li gt                   lt  ul gt               lt  div gt           lt  div gt       lt  nav gt   lt  body gt    url    Images abcd jpg  being the image stored in your solution in a folder called Images  Hope it helps  Note  I used the id  body  because the navigation bar was somehow overriding my background image

[html] how to set the background image fit to browser using html

Examples related to html

Examples related to css

Examples related to jsp

Examples related to background