什麼都沒有？

Using bootstrap, I'm trying to set a background-image for the first row of an html page. The .background CSS class, contains info on setting up the background image. When I make it a class of <body>, it works fine and fills the whole page with a background image. When I try to put it in the first <div>, though, The image is not displayed at all.什麼都沒有？

From what I understand, you can set a background image for a <div>. What am I doing incorrectly that is making this not work?

CSS:

.background 
{ 
background-image : url("image.jpg"); 
background-repeat : no-repeat; 
background-size : cover; 
}

HTML:

<body> 
<div class ="row background"> 
    <div class="col-xs-12"> 
    <h1 class="titletext text-center" id="text" style="color : #000070; margin-top : 250px; display : none" ><b>Harness the power of the web</b></h1> 
    <input class="center-block" type="image" id="down" src="down-arrow.png" style="margin-top : 350px; display : none" ></input> 
</div> 
</div> 

<!-- start new row --> 
<div class="row"> 
    <div class="col-xs-3"> 
    <!-- img> /img --> 
    </div> 
    <div class="col-xs-9"> 
    <p> 
    Blob 
    </p> 
    </div> 
<script> 
$("#text").fadeIn(6000); 
window.setTimeout(function() 
{ 
    $("#down").fadeIn(6000); 
}, 6000); 
</script> 
</body>

Also, here is an attempt at putting it in JSFiddle: https://jsfiddle.net/yc1jnp6o/2/ . For some reason Neither the image (which I changed for the fiddle) or the headline will display in the fiddle. This isn't the case on the apache server I have set up.

來源

2016-10-11 user2465510

放置一個背景圖像時，這是什麼出現 –

這是我以後想要添加圖片的標籤。我忘了把它拿出來。我在我的電腦上，它什麼也沒變。（也不能解決問題）。 – user2465510

爲了讓您的jsfiddle工作，您需要將所有css和js資源添加爲左側菜單中的外部資源。 –

You need to declare width and height when using background:

.background { 
    background-image: url("http://www.w3schools.com/css/img_fjords.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 200px; 
    height: 200px; 
}

來源

2016-10-11 05:00:36

-2

May be you can make use of pseudo code

.row.background:before{ 
    display:block; 
    content:''; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-image : url("http://www.w3schools.com/css/img_fjords.jpg"); 
    background-repeat : no-repeat; 
    background-size : cover; 
    z-index:-1; 
}

it covers whole row class

Check the fiddle

來源

2016-10-11 05:03:16 Manjunath

你爲什麼這麼辛苦？，他只需要和高度 –

是的，但不能一直改變寬度和高度，當他添加新元素時 – Manjunath

Don't use width, because he has used col-xs-12 in row , that means he want to 100% width

.background { 
 
    background-image : url("http://www.w3schools.com/css/img_fjords.jpg"); 
 
    background-repeat : no-repeat; 
 
    background-size : cover; 
 
    min-height:200px; 
 
}

來源

2016-10-11 05:15:54

什麼都沒有？

回答

相關問題