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.
放置一個背景圖像時,這是什麼出現 –
這是我以後想要添加圖片的標籤。我忘了把它拿出來。我在我的電腦上,它什麼也沒變。 (也不能解決問題)。 – user2465510
爲了讓您的jsfiddle工作,您需要將所有css和js資源添加爲左側菜單中的外部資源。 –