How to make fixed background image for all browser using Css | 2my4edge

21 January 2014

How to make fixed background image for all browser using Css

How to fix the background image as center for all re-sizing browser using css, here i'm going to tell you the simple way to fix the background image as background of the web site in all the re-size of browser window while zoomin and zoomout. let see the simple css code for that.
fix-background-image-for-all-brwser-using-css
DOWNLOAD                         LIVE DEMO

As you can seen in the above sample image, when you resize the browser by using zoom-in and zoom-out the background image will be fixed. most of the sites used repeat-x and repeat-y for the similar image.

CSS CODE
body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size: 12px;
    margin:0px;
    padding:0px;
    background: #1F2C34 url(background-fix.png) no-repeat center fixed;
    background-size: cover;
}
img {
    max-width: 100%;
    height: auto;
}

call the background image for body tag as background image url and make no-repeat center and fixed and the thing is background-size:cover; is for cover the browser.

HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to Make fixed background image for all browser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>

<body>
<div class="container">
  <h3 align="center">
    <p> Resize the browser </p>
    Main Tutorial
    <a href=""> Fix background image for all browser </a>
    &nbsp; / &nbsp; More Tutorial
    <a href="http://www.2my4edge.com"> www.2my4edge.com </a>
  </h3>
</div>
</body>
media="all" for support all the devices. and this code doesnot applies in IE8. i hope this is very helpful to you all. 

RELATED POSTS :








3 comments:

  1. Anonymous7/08/2014 1:45 PM

    i am new to css and thanks for the article. i finally understood what "cover" means. i thought it was only "fixed". i even browsed some online css generators like http://www.generatecss.com/css/background/ and http://css3generator.com/ it took me sometime to finally figure it out. lols. thanks for your help

    ReplyDelete
  2. Karthick2/03/2015 1:05 AM

    Nice post bro Good work.

    ReplyDelete
  3. WilliamKing9/14/2016 4:03 PM

    !!1

    ReplyDelete

Subscribe to: Post Comments (Atom)
^