div 열 뒤에있는 배경 이미지

그래서 저는 HTML과 CSS가 처음인데 헤더, 중심 열 및 그 열 뒤의 이미지로 만들어진 배경으로 레이아웃을 만들려고했지만 그냥 만들 수 없습니다 그것은 작동합니다. div 열 뒤에있는 배경 이미지

이

는 HTML 코드입니다 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"><html> 
<head> 
<title>mylayout </title> 
<link rel="stylesheet" type=text/css 
href="style/my1stcss.css" /> 
</head>  

<body> 
<div id="box">      
<div id="header"></div>  
<div id="column"></div>   
</div> 
</body> 
</html>

그리고 이것은 CSS 스타일 시트입니다 : 당신이 열 뒤에 흰색을 볼

html, body {margin:0px; padding:0px 
background-image:url (img.jpg)} 

#box { 
Height:auto ; 
Width:100% ; 
Margin-left:auto;  
Margin-right:auto;  
} 
#header { 
Height:150px; 
Width:100%;         
Background-color:red; 
} 
#column { 
Height:600px ; 
Width:50%  ;        
Margin-left:25% ; 
Background-color:blue; 
}

내가 이미지를 넣어 싶습니다.

출처

2014-07-24 oibroth

HTML 코드 및 CSS 코드 또는 JSFiddle 링크를 제공하십시오. – JoJo

예, ur 코드 제공 – kaboom

우선 CSS 속성을 모두 소문자에 작성해야합니다. Background-color은 유효한 CSS가 아니므로 background-color이어야합니다.

다음으로 CSS 값 사이의 빈 공간을 모두 제거하고 마지막에 항상 세미콜론 ;을 추가하십시오. 그렇지 않으면 CSS가 적용되지 않습니다. 마지막으로 이미지의 경로가 올바른지 확인하십시오. 그렇지 않으면 이미지가 표시되지 않습니다.

Here은 제공되는 코드의 jsFiddle 예제로, 배경으로 귀여운 키티를 사용하여 작동 방식의 예를 보여줍니다.

출처

2014-07-25 10:55:09 morkro

필자는 규칙을 따라 레이아웃을 만들었습니다.

<body> 
    <div class="center"> 
     <div class="main-frame"></div> 
     <div class="header"></div> 
    </div> 
</body> 


.center { 
    width: <must be set, can be percentage>; 
    margin: 0px auto; 
} 

.main-frame { 
    position: relative; 
    margin: <height of header> auto <height of footer> auto; 
    } 

.header { 
    position: absolute; 
    top: 0px; 
    height: <height of header>; 
    }

바닥 글 같은 approache : 그래서 당신보다 고정 높이의 헤더와 중심 "메인 프레임"을 만들려면 woud합니다. main-frame은 소스의 머리글과 바닥 글 앞에 표시되며, 그렇지 않은 경우 main-frame 뒤에 있으며 클릭 할 수 없습니다. 하나는 z-index을 사용하여이 문제를 해결할 수 있지만 Z- 색인과 혼동되지 않도록 가능한 한 적게 사용하려고합니다.

원하는 배경 이미지를 CSS를 사용하여 "메인 프레임"에 연결할 수 있습니다.

출처

2014-07-25 10:55:47 philipp

div 열 뒤에있는 배경 이미지

답변

관련 문제