Background Div-а

aglaz · September 7, 2010

Не так давно начал разбираться с CSS и это моя первая верстка, поэтому извиняюсь, если вопрос "ламерский", но самому не получается разобраться. Собственно сабж - никак не удается установить картинку на div, в результате она оказывается под ним.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<link rel="stylesheet" href="./header.css" type="text/css"/>
</head>
<body>

<!-- Header -->
<center>
<div class="header">
		<div class="block-body" style="background-image: url('images/header.png')">
			<div class="top-left"></div>
			<div class="top-center"></div>
			<div class="top-right"></div>

			<div class="middle-left">
				<div class="middle-right">
					<div class="middle-center">
						HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER 			  
					</div>
				</div>
			</div>
					<div class="bottom-left"></div>
					<div class="bottom-center"></div>
					<div class="bottom-right"></div>
		</div>	
</div>	

.header			 { width:90%; }
.block-body		 { margin-top: 10px; }
.top-left		{ background-image:url('images/block-top-left.png'); width:36px; height:37px;
				   float:left; }
.top-center	  { background-image: url('images/block-top.png'); background-repeat:repeat-x; height: 37px;
				   margin-left:36px; margin-right:36px; }
.top-right	   { background-image: url('images/block-top-right.png'); width:36px; height:37px;
				   float:right; margin-top:-37px; }


.middle-left	 { background-image:url('images/block-left.png'); background-repeat:repeat-y; }
.middle-center   { background-color:#f2f2f2; margin-left:36px; margin-right:36px;}
.middle-right	{ background-image:url('images/block-right.png'); background-repeat:repeat-y; background-position:top right; }


.bottom-left	 { background-image:url('images/block-bottom-left.png'); width:36px; height:37px;
				   float:left; }
.bottom-center   { background-image: url('images/block-bottom.png'); background-repeat:repeat-x; height: 37px;
				   margin-left:36px; margin-right:36px; }
.bottom-right	{ background-image: url('images/block-bottom-right.png'); width:36px; height:37px;
				   float:right; margin-top:-37px;}

klierik · September 8, 2010

устанавливая бекграунд вы устанавливаете фон на содержимое дива.

Sign In

Background Div-а

Question

aglaz

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information