A question for beginners about CSS? _html/css_WEB-ITnose

 
 

  

 

 

Head Line

The Internet Society's mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet.  Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.The Internet Society's mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet.  Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.

zen2.css
body {
background-image:url(bg-grad.gif)
/*background-repeat:repeat-x;*/
}

h1 {
/*background-color:#678; */
color:white;
text-align:center;

}

.p1 {
width:200px;
float:left;
margin:10px;
margin-left: 0;
padding:10px;
border:3px gray double;
background:#9BD;
height:200px;

}

.p2 {
font-size:20px;
line-height:1.8;
background-color:white;
}

.firstLetter {
font-size:3em;
float:left;
}

img {
border:1px dashed gray;
margin:10px,10px,10px,0;
padding:5px;
float :left;
}

The problem is this, the background image in the body can be displayed without adding the background-repeat attribute, but if it is added, it will be lost using IE or FF. The example in the book is that the embedded CSS code is different from the external reference type, but it is normal to open it with the example program on the CD in the book. Puzzled?

Reply to the discussion (solution)

Maybe the height of the background image is too small and cannot be seen during repeat-x.

You make me very sad.

It is recommended that you delete those useless styles first. Then test it bit by bit, don't let other styles affect it. In this case, you should be able to find the error quickly

When writing css, LZ must first pay attention to the correct path of the background image referenced in your css, and then see if your background image is horizontally aligned. , if you don’t look carefully at repeat-x, you will feel that there is no image

The repeat attribute should be used according to the image size

background-image:url(bg-grad.gif) ;

Is it a problem with external references and internal relative paths? This may be the reason why it is not displayed.

body {
background-image:url(bg-grad.gif)
/*background-repeat:repeat-x;*/
}
One terminator is missing Semicolon;

body style code should be like this:
body {
background-image:url(bg-grad.gif);
/*background-repeat:repeat-x ;*/
}

It’s really confusing

It’s confusing. Don’t write the background style separately, but put it together, such as:
background:url(**.jpg) no-repeat left top;

Beginners can’t understand it.

body {
background:url(bg-grad.gif)
background-repeat:repeat-x ;
}


Let’s change it to this, okay?