把圖像和H1的比其他圖像

Question

我想打好文本和在崇高的文本空白文檔圖像（請查看鏈接：http://ancient-badlands-4040.herokuapp.com/）

正如你所看到的，我的H1是在/在上面我想讓它躺下的圖像。我也有一張我想要的圖片。

我在做我的div的問題嗎？我認爲，由於崇高的文字圖像是在相同的文本將覆蓋圖像的div？

一注，可能會比較混亂的是，我sublimetext圖像被稱爲Codeythecoder.png

任何幫助，將不勝感激，謝謝:)

style.css.scss doucment：

$navbarLinkColor: #90fce8; 
$navbarBackground: #ff3600; 
$navbarBackgroundHighlight: #ff3600; 
$navbarText: Archivo Black, sans-serif; 
@import url(http://fonts.googleapis.com/css?family=Archivo+Black); 


@import 'bootstrap'; 

body { 
    padding-top: 150px; 
    background: url('escheresque_@2X.png'); 
} 

.banner { 
    background: url('CDRedBG.png'); 
    height: 550px; 
    margin: 0 auto; 
    color: #fff; 
} 

.row { 
    margin-left: -30px; 
} 

@import 'bootstrap-responsive'; 



.navbar-inner { 
    @include box-shadow(none !important); 
    border: 0; 
    width: 100%%; 
    margin: auto; 
} 

header { 
    width: 100%; 
    text-align: center; 
    background: transparent; 
    display:block; 
    overflow: hidden; 

} 
ul { 
    list-style: none; 
    display: inline-block; 
    vertical-align: middle; 
    margin: 0; 
    padding: 0; 
    li{ 
    display: inline-block; 
    } 
} 

.logo{ 
    font-size: 30px; 
    vertical-align: middle; 
    margin: 0 40px; 
} 

.second { 
    .nav-left{ 
    float: left; 
    } 
    ul{ 
    padding: 30px 0; 
    } 
    .nav-right{ 
    float: right; 
    } 
    .logo{ 
    padding: 200px 0; 
    display: inline-block; 
    } 
} 

.featurette-image.pull-right { 
margin-left: 40px; 
} 

.featurette { 
padding-top: 120px; 
overflow: hidden; 
} 

.marketing h2 { 
font-weight: normal; 
} 

.muted { 
color: #999999; 
} 

.featurette-divider { 
margin: 80px 0; 
} 

.container { 
width: 1170px; 
} 

.lead { 
margin-bottom: 20px; 
font-size: 21px; 
font-weight: 200; 
line-height: 30px; 
} 

html.erb文件：

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner "> 
    <div class="container-fluid"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <header class="top" 

     <div class="nav-collapse collapse"> 
     <ul class="nav pull-right"> 
      <li><a>CODEY</a></li> 
      <li> <a>CODEY</a></li> 
     </ul> 
     <span class="logo"><%= image_tag 'ctclogojagged3.png', alt: 'logo' %></span> 

     <ul class="nav pull-left"> 
      <li><%= link_to "HOME", root_path %></li> 
      <li><%= link_to "ABOUT", about_path %></li> 
      <li><a>CODEY</a></li> 
      </ul> 




     </div><!--/.nav-collapse --> 
     </div> 
    </div> 

    </div> 
    <div class='banner'> 
     <div class="container"> 
      <div class="row"> 
      <h1> I would like text and a pie graph to show over this sublime text backdrop </h1> 

      <%= image_tag 'Codeythecoder.png' %> 
      </div> 
     </div> 
    </div> 


</header> 

Answer 1

位置h1和餡餅形象絕對和設置各自的頂部，左邊位置

CSS

.banner .container .row { 
    position:relative; //Needed so that child elements using position 
         //will have have their coordinates relative to the parent 
         //and not the page. 
} 

.banner .container .row h1 { 
    position:absolute; 
    top:30px; 
    left:30px; 
} 

#pieChartID { 
    position:absolute; 
    top:140px; 
    left:130px; 
} 

，當然還有一個fiddle

Answer 2

你可以把你的圖像作爲背景一個div的-image：

檢查this fiddle

HTML代碼：

<div id="main"> 
    <h1>Your title</h1>  
</div> 

CSS代碼：

html,body{ 
    height:100%; 
} 

#main{ 
    background-image:url('http://ancient-badlands-4040.herokuapp.com/assets/Codeythecoder-72c5e9659bf2c12819ece72fa6a79606.png'); 
    height:100%; 
} 

h1{ 
    color:white; 
} 

Answer 3

看看下面的鏈接。您需要使用定位和填充在接受的答案中描述的內容。

How do I position one image on top of another in HTML?

也許是一個更容易的解決辦法是使用圖像編輯器創建的圖片，你會用文字和所有的，然後就上傳，使用<img src="URL" />

Answer 4

你也可以用Z-index屬性喜歡。

CSS代碼：

.main img { 
    position: absolute; 
    z-index: -1; 
    left: 0; 
    top: 0; 
} 

檢查this fiddle