[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1080
  • Last Modified:

Body BackGround Image

I am trying to align a background image to the bottom in Firefox and it wont work. Can someone let me know what i am doing wrong?

css
body{
      background-color:#090909;
      background-image:url('../images/bg_grad.jpg');
      background-position:bottom left;
      background-repeat:no-repeat;
}
source

<!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=iso-8859-1" />
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
test
</body>
</html>
0
nmg321
Asked:
nmg321
1 Solution
 
TheKyleCommented:
The body is technically only as tall as the content that it contains, so until your content is as tall as the browser window, you can't have a background image line up with the bottom of the page.
0
 
Mark StegglesWeb DeveloperCommented:
Greets,

you need to set the height of the body and you dont need those quotes in the background-image declaration.

<!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=iso-8859-1" />
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style type="text/css">
html,
body {
height:100%;
min-height:100%;
width:100%;
}
body {
      background-color:#090909;
      background-image:url();
      background-position:bottom left;
      background-repeat:no-repeat;
}
</style>
</head>
<body>
test
</body>
</html>
0
 
TNameCommented:
Hi, to make it work in FF you could try to add this to the body style and it should work:

   background-attachment:fixed;

0
 
grahamnonweilerCommented:
Firefox, Safari, Opera - in fact anything other than IE handle body background images rather strangely if not using the default top left poisiton. Safest way to ensure the correct positioning is to use a full page <div> tag with the backgraound specified in it instead. This will work across all browsers without exception. An example using your background settings is below

<html>
<head>
</head>
<body>
<div id="overallcontainer" style="position:absolute; left:0px; top:0px;width:100%;height100%;background:#090909 url('../images/bg_grad.jpg') no-repeat bottom left;">

..... you html

</div>
</body>
</html>
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now