삽입 된 이미지가 겹쳐지는 배경 이미지

Question

나는 HTML & CSS로 놀고있어 매우 단순한 "제작 중"페이지를 만들고자합니다. 배경을 검정색으로하고 텍스트를 흰색으로 만들었습니다. 텍스트를 원하는 위치에 배치하고 텍스트 아래에 이미지를 삽입하지 않으려 고합니다. 사이트에 이미지가 있지만 어떻게 든 내 배경 뒤에 있습니까? 무엇을해야할지 모르는 사람?

Heres는 내 CSS 코드 :

.fullscreenDiv { 
    background-color: #000000; 
    width: 100%; 
    height: auto; 
    bottom: 0px; 
    top: 0px; 
    left: 0; 
    position: absolute; 
    background-attachment:fixed; 
} 
.center { 
    position: absolute; 
    width: 100px; 
    height: 50px; 
    top: 50%; 
    left: 50%; 
    margin-top: -75px; 
    margin-left: -190px; 
    white-space: nowrap; 
    font-family: Century Gothic; 
    font-size: 120%; 
    color: #FFFFFF; 
} 
.trademark { 
    position: absolute; 
    width: 100px; 
    height: 50px; 
    top: 50%; 
    left: 50%; 
    margin-top: 250px; 
    margin-left: 400px; 
    white-space: nowrap; 
    font-family: Century Gothic 
    font-size: 80%; 
    color: #FFFFFF; 
} 

그리고 내 HTML :

<div class='fullscreenDiv'> 
    <div class="center">Our website is currently under construction.</div> 
</div> 

<div class='fullScreenDiv'> 
    <div class="trademark">@GameAdviser - Copyright 2014</div> 
</div> 

편집 : 지금 그냥 빨리 문제는, 내가 내 사진을 배치 일했다 만들어 내 FTP에 업로드 , 지금 내가 웹 사이트에 들어갈 때 나는 나의 그림을 보지 못한다, 단지 "이미지가 가능하지 않은"이미지 또는 그것이 무엇이든지간에 경계를보아야한다. 전에 내가 잘 작동 한 사진이 있었기 때문에 이상하게 보입니다.

png에서 jpeg로 변경하려고했으나 차이가 없었습니다.

Answer 1

당신은 .center에 z-index 속성을 추가

z-index:199; // for the Element you want on top 
z-index:-199; // for the Element you want at bottom 

Answer 2

같은 Z- 인덱스를 사용하여 클래스 이름 fullscreenDiv 대신 fullScreenDiv 대소 문자 구분을 변경할 수 있습니다.

DEMO

.center { 
    position: absolute; 
    width: 60%; 
    height: 50px; 
    top: 50%; 
    left: 20%; 
    font-family: Century Gothic; 
    font-size: 120%; 
    color: #FFFFFF; 
    z-index: 10; 
    text-align: center; 
}