Фоновое изображение на странице .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');

Это будет начинаться с корня сайта, искать папку с именем images, а затем файл с именем image.bmp

EDIT:

Я подтвердил ваши настройки на моем локальном ящике. Я создал проект WebApplication аналогичного дизайна.

C: \ Users [Me] \ Documents \ Visual Studio 2010 \ Projects \ WebApplication1 \ WebApplication1 \

Создал bmp с пробелами и ссылками в файле CSS как:

    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;
}

И это работает как ожидалось.

Не могли бы вы переключить фоновое изображение на класс body, чтобы убедиться, что оно не является ссылкой на ваш идентификатор #HomePage?

Answer 2

Хотя .bmp поддерживается основными браузерами .png, .gif и .jpg имеют самую высокую поддержку среди браузеров и, как правило, более дружественны к Интернету

Поддержка формата изображенияwikipedia.org

Я бы предложил сохранить файл как .png или .jpg и повторить попытку, например:

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

Вот простой пример: http://jsfiddle.net/pxfunc/UkCKX/1/

Также имейте в виду, что относительный путь к изображению основан на вашем файле CSS

, поэтому, если CSS находится в корневой папке, как это

• Изображения(папка)
• Default.aspx
• Styles.css

, тогда путь из css будет images/[filename]

или еслиCSS вложен в папку, например,

• Изображения (папка)
• Стили (папка)
  • Styles.css
• Default.aspx

тогда путь от css будет ../images/[filename]