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.
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.

body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size: 12px;
    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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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" />

<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=""> </a>
media="all" for support all the devices. and this code doesnot applies in IE8. i hope this is very helpful to you all. 



  1. 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 and it took me sometime to finally figure it out. lols. thanks for your help

  2. Nice post bro Good work.