Solved

Master Page Content place holder with I background image

Posted on 2011-02-26
3
3,086 Views
Last Modified: 2012-05-11
I am trying to add a background image to one or my contentplaceholder  and it is not working what am I doing wrong.

 <div style ="background-image: url('~/media/images/OFFROADBACKGROUND.png');" > 

See code below

Thanks in advance for you help
<%@ Page Language="C#" MasterPageFile="~/media/master/k4Secondary.master" AutoEventWireup="true" CodeFile="offRoad.aspx.cs" Inherits="offRoad" %>



<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

 <div style ="background-image: url('~/media/images/OFFROADBACKGROUND.png');" > 
 <asp
    <style type="text/css">
          .Green
        {
            font: bold 14pt arial;
            color: Green;
        }
        .Red 
        {
            font: bold 14pt arial;
            color: #ed1c24;
        }
        
        .StepName
        {
            font: bold 20pt atial;
            color: Black;
            
        }
     
        
        li.steps
        {
            padding-bottom: 10px;
            list-style-image: none;
        }
      
        
    </style>

    

<div style="height: 259px">
  <asp:Image ID="Image1" runat="server" ImageUrl="~/media/images/QuoteBox.gif" 
        align="Left" hspace="10" vspace="10" Height="239px" Width="256px" />
    <p style="font-size: 13pt;padding-left:15px;text-align: left; height: 226px;">
        <br />       
         Here at  we do more than just tires.  We offer a complete line of Jeep or Truck Lift Kits, Springs, Shocks, Leveling Kits and much more.
        Tire wants to handle all your Truck and Jeep susemsion needs.  We carry all top brands for your truck and Jeep needs including but not limited to
         Pro Comp, Fabtech, Rancho, Super Lift, RCD, Daystar, Truxxx, Ready Lift, Fox, King, Edelbrock, Rize, Bilstien, Air LIft, Sky Jacker, 
         and many others. Tell us about your needs for a preformance lift upgrade and WE Will do the rest! 
	</p>


    <br/><br/>
     </div>
 








<br/><br/>
<br/><br/>
    <p>
      <asp:Image ID="Image2" runat="server" ImageUrl="~/media/images/AIRLIFT.gif" 
            align="Left" hspace="0" vspace="0" Width="130px" />
      
    
      <asp:Image ID="Image4" runat="server" ImageUrl="~/media/images/Daystar.gif" 
            align="Left" hspace="0" vspace="0" Height="76px" Width="214px" />
      <asp:Image ID="Image13" runat="server" ImageUrl="~/media/images/CST.gif" 
            align="Left" hspace="0" vspace="0" Height="108px" />
      <asp:Image ID="Image10" runat="server" ImageUrl="~/media/images/SkyJacker.gif" align="Center" hspace="10" vspace="10" />
        <asp:Image ID="Image6" runat="server" ImageUrl="~/media/images/ProComp.gif" align="Left" hspace="10" vspace="10" />


      <br />
       <asp:Image ID="Image5" runat="server" ImageUrl="~/media/images/Fox.gif" align="Right" hspace="10" vspace="10" />
      
    
      <asp:Image ID="Image7" runat="server" ImageUrl="~/media/images/RCD.gif" align="Center" hspace="10" vspace="10" />
         <br />
       <asp:Image ID="Image8" runat="server" ImageUrl="~/media/images/Fabtech.gif" align="Right" hspace="10" vspace="10" />
      
      <asp:Image ID="Image9" runat="server" ImageUrl="~/media/images/Rize.gif" align="Left" hspace="10" vspace="10" />
      
          <br />
       <asp:Image ID="Image11" runat="server" ImageUrl="~/media/images/SuperLift.gif" align="Right" hspace="10" vspace="10" />
      
      <asp:Image ID="Image12" runat="server" ImageUrl="~/media/images/TRUXXX.gif" align="Left" hspace="10" vspace="10" />
     


</p>

 </div>
</asp:Content>

Open in new window

0
Comment
Question by:BBQMemphis
  • 2
3 Comments
 
LVL 29

Expert Comment

by:Paul Jackson
ID: 34989745
Using a ~ in a relative path only works for server side controls.
Use a relative path without using ~ if possible or use an absolute path.
If the content page is in the root of your website you would use :

<div style ="background-image: url('/media/images/OFFROADBACKGROUND.png');" > 

alternatively you could turn your div into a servercontrol :

<div style ="background-image: url('~/media/images/OFFROADBACKGROUND.png');" runat="server">
0
 
LVL 9

Expert Comment

by:mayank_joshi
ID: 34990913
try this:-

<div style ="background-image: url('<%="~/media/images/OFFROADBACKGROUND.png" %>');" > 

Open in new window

0
 
LVL 9

Accepted Solution

by:
mayank_joshi earned 500 total points
ID: 34990957
sorry ignore the above post and try this:-

<div style ="background-image: url('<%=this.ResolveUrl("~/media/images/OFFROADBACKGROUND.png") %>');" > 
1

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This Micro Tutorial will teach you how to censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
Migrating to Microsoft Office 365 is becoming increasingly popular for organizations both large and small. If you have made the leap to Microsoft’s cloud platform, you know that you will need to create a corporate email signature for your Office 365…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now