CODEWITHSUNDEEP
cssasp.net-mvcimage
tech_learner
tech_learner

Reputation: 725

Background image on .aspx page

I have an image of type .bmp which I wish to use as a background image on an aspx page.

Below is my code in .css file: 

/* 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 Code

<%@ 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>

No image is being displayed on the web page... What could be the issue??

Upvotes: 0

Views: 11037

Answers (2)

MikeM
MikeM

Reputation: 27405

While .bmp is supported by the major browsers .png, .gif, and .jpg have the highest support across browsers and are generally more web friendly

Image Format Support - wikipedia.org

I'd suggest saving the file as .png or .jpg and trying again with something like:

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

Here's a basic example: http://jsfiddle.net/pxfunc/UkCKX/1/

Also keep in mind the relative path to the image is based on your css file

so if the css is in the root folder like so

  • Images (folder)
  • Default.aspx
  • Styles.css

then the path from the css would be images/[filename]

or if the css is nested in a folder like so

  • Images (folder)
  • Styles (folder)
    • Styles.css
  • Default.aspx

then the path from css would be ../images/[filename]

Upvotes: 0

Khepri
Khepri

Reputation: 9627

Your image path should be relative to the root of your website, not a physical filesystem path. It only knows from your sites root down.

If your images were stored off in an image folder that was down one level from your sites root (which it looks like you have) you would have:

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

This would start at the root of the site, look for a folder called images, and then a file called image.bmp

EDIT:

I've verified your setup on my local box. I created a WebApplication project of similar design.

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

Created a bmp with spaces and all refereced in a CSS file as:

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

And this functions as expected.

Results

Could you switch the background image to the body class to verify it's not a reference issue to your #HomePage id?

Upvotes: 1

Related Questions