.aspx页面上的背景图像

Question

我有一个类型为.bmp的图像，我希望将它用作aspx页面上的背景图像。

下面是我在.css文件代码：

/* Background home image 
-----------------------------------------------------------*/ 

.page 
{ 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
} 

#HomePage 
{ 
    background-image: url('C:\Users\MyName\Documents\Visual Studio 2010\Projects\IP_Project2\IP_Project2\images\WeMeet - Landing Page.bmp'); 
} 

////////////////////////////// /////////////////////////////////////////////////

的.aspx代码

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site1.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 

    <h2></h2> 
    <div id="HomePage"> 
    <p>Hello</p> 
    </div> 
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server"> 

</asp:Content> 

被在网页上不显示图像...可能是什么问题？

Answer 1

您的图像路径应该是相对于您网站的根目录，而不是物理文件系统路径。 它只知道你的网站根目录。

如果你的图片是在一个从您的网站根目录（它看起来你有）向下一级的图像文件夹中存储过你会：

background-image: url('/images/WeMeet - Landing Page.bmp'); 

这将启动在的根现场，寻找一个文件夹，名为图像，然后一个名为image.bmp文件

编辑：

我已经验证了您的设置对我的本地框。我创建了一个类似设计的WebApplication项目。

C：\用户[我] \文档\ Visual Studio 2010的\项目\ WebApplication1 \ WebApplication1 \

创建一个bmp的间隙和CSS文件中的所有refereced为：

body 
{ 
    background-image: url('/images/Image With Spaced Name.bmp'); 
    font-size: .80em; 
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif; 
    margin: 0px; 
    padding: 0px; 
    color: #696969; 
} 

而且这按预期发挥作用。

你能否背景图像切换至身体类，以验证它不是一个引用问题你#HomePage ID？

Answer 2

虽然.bmp被各大浏览器.png，.gif支持，并.jpg具有跨浏览器最高支持和一般都比较友好的网站

Image Format Support - wikipedia.org

我建议将文件保存为.png或.jpg并尝试用类似的东西：

background-image: url('/images/WeMeet - Landing Page.png') 

这是一个基本的例子：http://jsfiddle.net/pxfunc/UkCKX/1/

在心里也保持到图像中的相对路径是基于你的CSS文件

所以如果CSS是在根文件夹，像这样

• 图片（文件夹）
• Default.aspx的
• Styles.css中

然后从c路径SS将images/[filename]

，或者如果CSS是嵌套的文件夹中，像这样

• 图像（文件夹）
• 样式（文件夹）
  • Styles.css中
• 默认.aspx

那么从CSS的路径将是../images/[filename]