CODEWITHSUNDEEP
htmlcssresponsive-design
Meta
Meta

Reputation: 1860

responsive background - css

I am currently working on a really simple splash screen for a game I am developing and wanted to just create a responsive background image (not familiar with responsive stuff personally).

I have it working for the most part (in Google Chrome and IE), but the problem is when I open the page in Firefox, the background is pushed up:

Pushed in Firefox

HTML:

<html>
<head>
    <link rel="stylesheet" href="css/style.css">
</head>

<body id="bg">

</body>

CSS:

html, body, aside {
    display: block;
    margin: 0;
    padding: 0;
}

#bg {
    background-image: url(../images/bg.png);
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-position:center;
}

Any tips on how to resolve this, and make sure the page works in all browsers would be appreciated!

Upvotes: 0

Views: 136

Answers (1)

Faiz Ahmed
Faiz Ahmed

Reputation: 1103

Try this: 

html { 
  background: url(../images/bg.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Tested in firefox. Working fine.

Upvotes: 1

Related Questions