Member Avatar for punkrockbboy

I've been scratching my head on this all night, i'm trying to position in CSS a image in the {body} element (i hope that is the right term, i'm still new to all this).

Heres what i have right now:

body {
background-color: #ffffff; 
     color:#000000;
     background-image: url(chapter11bkg.jpg);
     background-repeat: no-repeat;
     background-position: left bottom;
     }

No matter what i do i cannot get the "background-position: left bottom" part to work, thing is if i remove that part of the code the image will appear.

Now i use Mozilla Firefox to preview all changes i make to the CSS, when i tried it out in IE it did work though, is there a problem with positioning images in CSS in Mozilla? is there anything i can do to make it work?

Cheers.

  • 2 Contributors
  • 5 Replies
  • 176 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by tgreer
Member Avatar for tgreer

According the CSS specification, it's "bottom left", not "left bottom". Try that and let us know. You can't trust IE, it will do all sorts of wild things. You actually can't trust ANY browser if you don't have a proper DOCTYPE set in your pages. You have a partial, incomplete DOCTYPE.

Member Avatar for punkrockbboy

Hey thanks for the reply, i tried changing the CSS to "bottom left" as you suggested but it made no difference, Mozilla still wont display it but IE will, it's very frustrating.

This here is my DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Chapter 11</title>
<link rel="stylesheet" type="text/css" href="chapter11.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

Incidently, i found this site the other night while trying to figure out a solution and it presents the same problem, when i use Mozilla the background image does not display correctly at all (the image is told to display "center" but it appears at the top of the page, with only half visable) but works just fine in IE:

www.w3schools.com

Member Avatar for tgreer

Yes, that doctype isn't complete. Read this article on doctypes.

The problem you've encountered is related to the "box model", and each browser has a different one. Consider this zen-like question: where is the "center" of an empty element? How do you align a round smiley face with the bottom of something?

You can see there are lots of ways to answer those questions, and when a browser answers them in a way we don't expect, we're puzzled.

So here are my suggestions:

  • Don't use the "background-position" attribute.
  • Don't use a background image at all in the "body" tag.
  • Do use a DIV or SPAN to contain your image.
  • Do use the CSS "position" to control that SPAN or DIV.
Member Avatar for punkrockbboy

Yeah cheers for that, i must admit i wouldn't normally use the "background position" attribute, but it's part of a tutorial in chapter 11 of this book i am reading right now (HTML with XHTML and CSS - fifth edition - by Elizabeth Castro) and it never mentioned any problems like this that i might encounter, so thanks for your help.

I have to admit, i can't wait to get a better grasp on all this CSS stuff, right now it's all very frustrating, i'm more of an artist, i see things visually, not in code, but if i want a job as a web designer i need to understand this kind of thing, oh well, back to the books!

Thanks again! :mrgreen:

Member Avatar for tgreer

You're quite welcome. That is a good book, though, to start with. It's a good foundation, you just have to learn the real-world lessons. Feel free to post any other questions you have.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.