CSS3 HTML5 Layer

I’m doing my Website but I have a problem. I have one background image and in this image, different layers: layer are with exactly the same size and same position. I tried this :

HTML

<body>
  <div id="1"> </div>
  <div id="2"> </div>
</body>

CSS

body {
  background-color: #feecc5;
  font-size: 13px;
  position: absolue;
  background-image: url(images/fond.png);
  width: 600px;
  height: 960px;
  background-position: center top;
  background-repeat: no-repeat;
}

#1 {
  background-image: url(images/formation.png);
  width: 600px;
  height: 960px;
  z-index: 1;
}

#2 {
  background-image: url(images/experiences.png);
  width: 600px;
  height: 960px;
  z-index: 2;
}

The background image for the body is perfect, after the different layers are very bad… I don t understand after i tried also a position: center for the div, nothing. Also put all the div “layer” in the general div, it doesn’t work too. I don t know that i have to do. Thank you very much for your help.


solution

In CSS, identifiers cannot start with a digit. This is why your styling isn’t being applied.

CSS2.1

Syntax and basic data types / 4.1.3 Characters and case

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit , two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.

CSS3

Syntax and basic data types / 4.1.3 Characters and case

In CSS3, identifiers (including element names, classes, and IDs in selectors (see [SELECT] [or is this still true])) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit or a hyphen followed by a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”. (See [UNICODE310] and [ISO10646].) * * *

This obviously won’t work (example):

#1 { color:red; }

It would clearly work if you prepend a letter and changed the markup (example)

#p1 { color:red; }

As a work-around, you could use the attribute selector in order to select an id beginning with a number: (example)

[id="1"] { color:red; }