2016-04-11 17 views
0

Burada yaptığımın alt yapısının arka plan görüntüsünü temizlememesi ve örtbas etmesini sağladığını düşünüyorum.arka plan görüntüsünü önyükleme dosyasında görünmeyebilir, belki altbilgi sorunu

Bu konuda birçok yolla uğraştım ve bu noktada hayal kırıklığına uğradım çünkü arka plan görüntüsünün görünmesini sağlayamıyorum! Sadece bir başlık ve aralarında küçük bir boşluk olan bir altbilgi (bence başlık için bir boşluk).

Sorun, üstbilgi ve altbilgi arasında biraz boşluk yapmaya çalıştığımda bile arka plan görünmüyor.

Eminim ki burada gecikmiş bir şey yapıyorum, lütfen yanlış yaptığımı yapabilirsiniz.

Burada yaptığım şeyi korumak için, tüm sayfayı kapsayan büyük bir arka plan görüntüsü ve üzerinde bazı bilgiler, üstbilgi ve altbilgi bulunan görüntü üzerinde şeffaf bir yüzer kutu istiyorum.

Görüntüyü html'ye koyup üzerine başka bir DIV koyup daha iyi bir şekilde yapılabiliyorsa, lemme bilir. Dediğim gibi, burada biraz gecikmeli adımı görüyorum, bir göz attığın için teşekkürler.

Kodun tamamını burada yayınlayacağım, böylece kodun ne olduğuna dair bir karışıklık olmayacak.

Html: css annnnd

<html> 
    <head> 
     <title>Harley Fisher</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link href = "css/bootstrap.min.css" rel = "stylesheet"> 
     <link rel = "stylesheet" type = "text/css" href = "styles.css"> 
</head> 

<body> 
    <div class = "navbar navbar-default navbar-static-top"> 
     <div class = "container"> 
      <a href = "#" class = "navbar-brand">Harley Fisher, CRS</a> 

      <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"> 
       <span class ="icon-bar"></span> 
       <span class ="icon-bar"></span> 
       <span class ="icon-bar"></span> 
      </button> 

      <div class = "collapse navbar-collapse navHeaderCollapse"> 
        <ul class = "nav navbar-nav navbar-right"> 

         <li class = "active"><a href = "#">Home</a></li> 
         <li><a href = "#">Buy</a></li> 
         <li><a href = "#">Rent</a></li> 
         <li><a href = "#">Agents</a></li> 
         <li><a href = "#">Contact</a></li> 
         <li><a href = "#">About Us</a></li> 
       </div> 
      </div> 
     </div> 
    </div> 


    <div class = "gradfoot"> 
     <div class="container"> 
      <div class="col-sm-8 col-sm-offset-2 text-center"> 
       <h2 class="">Contact Me</h2> 

       <hr class=""> 
     <h4 class=""> 
    Harley Fisher 
    </h4> 


     <p><span class = "glyphicon glyphicon-map-marker" aria-hidden="true"></span>1723 S Leyden St 
Denver</p> 
     <p><span class = "glyphicon glyphicon-envelope" aria-hidden="true"></span> [email protected]</p> 
     <p><span class = "glyphicon glyphicon-earphone" aria-hidden="true"></span> (303) 759 8811</p> 
     <p><span class = "glyphicon glyphicon-print" aria-hidden="true"></span> (303) 759 8844</p> 
     <hr class=""> 
     <ul class="list-inline center-block"> 
      <li><a href="#" class=""><img src="images/fb.png" class=""></a> 
      </li> 
      <li><a href="#" class=""><img src="images/twit.png" class=""></a> 
      </li> 
      <li><a href="#" class=""><img src="images/goog.png" class=""></a> 
      </li> 
      <li><a href="#" class=""><img src="images/pint.png" class=""></a> 
      </li> 
     </ul> 
    </div> 
    </div> 

    <script src="https://code.jquery.com/jquery-1.12.2.js"></script> 
    <script src = "js/bootstrap.js"></script>  
</body> 

: bir göz için

body{ 
background-color: black; 
background-image:url("images/bigbg.jpg"); 
height:100%; 
width:100%; 
} 

#myCarousel{ 
margin-top: -20px; 
z-index:1; 
} 

#shadowh{ 
text-shadow: 1px 1px black; 
font-size: 50px; 
} 

#shadowp{ 
text-shadow: 1px 1px black; 
font-size:20px; 
} 


/* navbar */ 
.navbar-default { 
background-color: #432281; 
border-color: #432281; 

} 
/* title */ 
.navbar-default .navbar-brand { 
color: #cccccc; 
} 
.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus { 
color: #f2f2f2; 
} 
/* link */ 
.navbar-default .navbar-nav > li > a { 
color: #c7c7c7; 
} 
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
color: #f2f2f2; 
} 
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
color: #f2f2f2; 
background-color: #7e46e7; 
} 
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus { 
color: #555; 
background-color: #D5D5D5; 
} 

    .searchbar{ 
max-width: 800px; 
} 

label{ 
margin-top: 35px; 
padding:10px; 
color:#f2f2f2; 
font-size:40px; 
} 

.butpad{ 
padding:10px; 
margin-bottom:10px; 
} 

.rowpad{ 
padding:20px; 
} 

.stackpad{ 
padding:10px; 
} 

.carousel-inner img{ 
margin:auto; 
} 

.grad{ 
background:#432281; 
background: -webkit-linear-gradient(#432281, #41335b); /* For Safari 5.1 to  6.0 */ 
background: -o-linear-gradient(#432281, #41335b); /* For Opera 11.1 to 12.0 */ 
background: -moz-linear-gradient(#432281, #41335b); /* For Firefox 3.6 to 15 */ 
background: linear-gradient(#432281, #41335b); /* Standard syntax */ 

} 

.gradfoot{ 
background:#000000; 
background: -webkit-linear-gradient(#41335b, #000000); /* For Safari 5.1 to 6.0 */ 
background: -o-linear-gradient(#41335b, #000000); /* For Opera 11.1 to 12.0 */ 
background: -moz-linear-gradient(#41335b, #000000); /* For Firefox 3.6 to 15 */ 
background: linear-gradient(#41335b, #000000); /* Standard syntax */ 
color:#9e9e9e; 
} 
@media (max-width: 500px) { 
    #shadowh { 
    font-size: 30px; 
    } 

    #shadowp{ 
     font-size: 14px; 
    } 

    .footh2{ 
     font-size:20px; 
    } 

    .footh4{ 
     font-size:16px; 
    } 

    .footp{ 
     font-size:13px; 
    } 

    label{ 
     font-size: 25px; 
    } 
} 

teşekkürler!

cevap

0

Ben kodunuzu denedim ve bu (sadece background-stil değerini değiştirerek) elde ediyoruz:

enter image description here

Benim tahminim background-image tarzında bir yanlış yolu kullanarak olmasıdır

+0

Umarım budur! Teşekkürler, sanırım bu klasörü yaptığım bir şablon projesinden kopyaladım ve "görüntüler" klasörü hala eski şablon klasörüne yönlendiriyor. Sana geciktiğini söyledim! : D –

+0

O kadardı, eminim ki geciktim –

+0

^_^endişelenme, bu olur! –

İlgili konular