CODEWITHSUNDEEP
javascripthtmlcssasp.net
Hardyanto Putra Antony. K
Hardyanto Putra Antony. K

Reputation: 577

javascript div background image not showing

I am trying to display a div with an image in its background in my aspx page. The image's name is 'PathFindingMap' ( a png file) and is located in the "images" folder. The "images" folder is in the same directory as the aspx page. However, nothing is shown on the page.

In the .aspx page's client side, i have the following code snippet:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="floorPlan.aspx.cs" Inherits="ipsWebs.floorPlan" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"  runat="server">
                        <div class="ClsdrawArea" id="draw_area" style="width: 100%; height:100%; background-image: url('images/PathFindingMap.png'); background-repeat: no-repeat; background-size:cover">
                            </div>

</asp:Content>

In the chrome browser, i pressed f5 and checked on the Network and it says the image "PathFindingMap" is loaded. However, i could not see anything on the web page. I tried to copy and paste the similar code "

Upvotes: 0

Views: 318

Answers (3)

Mr.Pandya
Mr.Pandya

Reputation: 2038

You are setting background-image to a block element.It takes width 100% by default.But height 0px.So you need to set haight some pixel to show background.

Upvotes: 1

vikas
vikas

Reputation: 1010

width and height doesnt work when you set background image to a div. give height and width in pixels or use bootstrap. 

style="width: 100px; height:100px;

see example plnkr here

Upvotes: 2

mindOfAi
mindOfAi

Reputation: 4632

Did you try changing the Build Action to Content and Copy to Output Directory property of the image to Copy if newer?

Upvotes: 0

Related Questions