2013-09-10 110 views
0

現在這是完整的HTML/CSS,因爲有人aked它。無法使用背景圖片HTML/CSS

這是一個更新版本,但它仍然無法正常工作!我在本地主機上運行這個(usbwebserver)。

我想使用背景圖像的一個div,但它不會顯示圖像形象。在圖片文件。

HTML:

<!DOCTYPE html> 
<html> 
<head> 


    <title>Computing</title> 
    <link rel="stylesheet" type="text/css" href="css/CSS.css"> 
    <link rel="shortcut icon" href="Images/laptop.ico" /> 

</head> 

<header class="Header"> 
<div class="logo" onClick="location.href='Home.html'"> </div> 

    <h1>Computing</h1> 

</header> 

<body> 


      <div class="opvulling1"></div> 
      <div class="buttonA">Home</div> 
      <div class="button" onClick="location.href='Laptops.php'">Laptops</div> 
      <div class="button" onClick="location.href='Cameras.php'">Camera's</div> 
      <div class="button" onClick="location.href='gsms.php'">GSM's</div> 
      <div class="button" onClick="location.href='Contact.html'">Contact</div> 
      <div class="button" onClick="location.href='Winkelwagen.php'">Winkelwagen</div> 
      <div class="opvulling2"></div> 


<div class="Central"> 
    <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacus augue, aliquam ut gravida eget, adipiscing in elit. Suspendisse potenti. Integer laoreet, risus nec fermentum imperdiet, leo magna interdum eros, eu aliquam turpis risus eget nulla. Vivamus ultrices urna vitae nisl vestibulum cursus. Suspendisse sed gravida libero. Fusce blandit dui id porttitor sodales. Morbi vitae sapien quis nulla gravida dignissim. Donec pharetra ipsum tellus, sed laoreet dui viverra in. Nullam blandit diam ac quam consectetur consectetur. Nulla facilisi. Nam ut quam diam. Nunc nec nisl ut tortor luctus commodo. Fusce nec velit neque. Vivamus ac dui tempor, malesuada lacus sed, sollicitudin odio. Nullam ac adipiscing velit, sed dapibus mauris. Sed et egestas dolor.</section> 

    <section>Phasellus non interdum nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sed convallis nisi. In in tellus eleifend, tincidunt metus et, auctor mauris. Nullam risus libero, condimentum in adipiscing elementum, tincidunt ut elit. Sed eu diam sed erat aliquam convallis in a mauris. Cras at enim condimentum dolor consequat consequat. Nulla mattis leo in justo molestie, nec tincidunt nulla consequat. Duis accumsan congue lacus sit amet vehicula. Duis vitae pretium urna. Donec sodales, risus id auctor tempor, nisi nisi vehicula dui, in aliquam ante arcu sit amet dui. Curabitur fringilla cursus erat, id lobortis neque aliquet a. Etiam et pharetra diam.</section> 
</div> 

CSS:

body{ 

background-color:#CAEAED; 

} 
.logo{ 
background-image:url('Images/Computing.jpg'); 
height:100px; 
width:200px; 



} 

.Central{ 
background-color: #FFFFFF; 
width: 50%; 
margin-top: 50px; 

margin-left:20%; 
height: auto; 
padding: 1%; 

font-family:Arial; 
font-size: 16px; 




} 
.Header{ 
background-color: #CAEAED; 

margin-top:-10px; 
margin-left:-10px; 

width: 101%; 
position:relative; 

height: 5%; 
padding-top:1px; 
padding-right: 1%; 

text-align:center; 

} 

h1{ 
font-size:30px; 
font-family:Arial; 
text-align: center; 

} 
section{ 
padding: 1%; 
} 

.button{ 
background-color:#009999; 
font-family:Arial; 
font-size: 16px; 
position:relative; 
float:left; 

margin-top: 2px; 
margin-right:2px; 
height:20px; 
padding:5px; 
} 
.buttonA{ 
font-family:Arial; 
font-size: 16px; 
background-color:#015965; 
transition: width 2s; 
margin-top: 2px; 
position:relative; 
float:left; 
margin-right:2px; 
height:20px; 
padding:5px; 
} 
.opvulling1{ 
background-color:#009999; 

float:left; 
margin-left:-10px; 
margin-top: 2px; 
margin-right:2px; 
height:20px; 
padding:5px; 
width:20%; 



} 
.opvulling2{ 
background-color:#009999; 

float:left; 
margin-top: 2px; 
margin-right:-2000px; 
height:20px; 
padding:5px; 
width:1200px; 

} 
.button:hover{ 
cursor:pointer; 
background-color:#1F6B75; 
font-family:Arial; 
font-size: 16px; 
} 



img{ 
height: 250px; 
width: 300px; 

} 
h3{ 
font-family:Arial; 

} 

form{ 
float: left; 
margin-left: 20px 

} 

td{ 
width:40%; 
text-align:center; 
} 

.Prijs{ 
float:left; 


} 
.article{ 
position:relative; 
float:left; 
margin-right:20px; 
background-color:white; 



} 



h2{ 
font-family:Arial; 
} 

我怎樣才能使圖像的工作?我已經在互聯網上搜索過它,但我無法在任何地方找到它。有人請幫忙。

+1

路徑是否正確? –

+0

'div'可能沒有高度。嘗試設置此div的尺寸或添加一些內容 –

回答

0

用途:

background-image:url('../Images/Computing.jpg'); 

你的CSS被調用,這需要您指定的路徑相對於你的CSS文件的相對方式。

1

您使用的是backslash而不是常規的slash

background-image:url('Images\Computing.jpg');} 
          ^
          ^

background-image:url('Images/Computing.jpg');} 

這應該工作,如果圖像確實是在指定的位置。

+0

嘗試過stil不起作用。 – Jerre44

+0

我們需要查看您的HTML以幫助您。 – Itay

+0

我把它更新到了整個HTML和CSS代碼 – Jerre44

3

變化\/

.logo{ 
     background-image:url('Images/Computing.jpg'); 
} 

如果您沒有看到圖像嘗試把圖像的尺寸,例如,如果是200 * 300試試這個:

.logo{ 
      width:200px; 
      height:300px; 
      background-image:url('Images/Computing.jpg'); 
    } 
0

你應該使用背景圖像風格爲

.logo { background-image:url('Images/computing.jpg');}

1

如果你有你的網站在Linux上,你應該知道在服務器網站上,文件名是區分大小寫的(Computing.jpg not equal computing.jpg)。請注意文件名稱與css引用相同。

祝你好運!

+0

在電腦vs計算上的好電話我在想這可能是整個目錄以爲圖像vs圖像 – Travis

0

我同意以上的人都對斜線,以及您需要的寬度和高度爲背景圖片,但我看到別的東西可能會引起問題。假設您在Web服務器上執行此操作,而不是在本地執行此操作。如果這是一個Linux環境,那麼一切都需要區分大小寫。我發現,這是不好的做法,使用圖片/我會改變對圖像/

0

寫您的標誌DIV裏面的一些文字只是爲了確保不與同和DIV的高度問題。