ASP.NET - Display image in div tag using css background-image:url

Asked By Annie X
03-Feb-12 10:11 AM
Hi hope you can help,

Im trying to get a background image working in my div tag using .css.

However if i do this it works.

 

<div class="Footer" style="background-image:url('AppImages/Backgrounds/NctFooterBackground.gif'); background-repeat:repeat-x;">

Any idea what i am doing wrong? All the bext AnnieX

.Footer{

width:100%;

 

margin:0px;

padding:0px;

 

border:solid 1px #000000;

display:inline; float:left; position:relative;

 

text-align:center;

background-image:url('AppImages/Backgrounds/NctFooterBackground.gif');

background-repeat:repeat;

 

}


<div class="Footer">&nbsp;</div>

  D Company replied to Annie X
03-Feb-12 10:37 AM
Hello.


first thing add position relative in your footer class css.
position: relative;

Secondly, you can using <span> instead of <div> tags. div tag will start and end on new lines. span will not exceed the tag area.

give try to these ideas and let me know if it is not working.
Regards
D
  [)ia6l0 iii replied to Annie X
03-Feb-12 10:57 AM
OK. First thing - Please name your CSS styles in lowercase. 

Back to your problem - the display, float, position elements could have pushed the div out of focus. 
display:inline; float:left; position:relative;

And also if this is under another styled element, please add clear:both; to your styles.

.footer{
width:100%;
clear:both;
margin:0pxpadding:0px;
border:solid 1px #000000text-align:centerbackground-image:url('AppImages/Backgrounds/NctFooterBackground.gif');
background-repeat:repeat;
}

If this works, then add the display, float and position accordingly. And also note that this file would not ideally reside in the AppImages folder. So the path to the image should be 
background-image:url('../AppImages/Backgrounds/NctFooterBackground.gif');

Thank you.

  kalpana aparnathi replied to Annie X
03-Feb-12 12:38 PM
hi,

Given below link is useful for you please check it

http://www.webmasterworld.com/forum83/6400.htm
Create New Account
help
like putting these menus into a box. How do I do that.? Thanks! I use asp.net hi try this just right click on main page in eggheadcafe and select view page source . . . . . . . . you will get style of menu < table id = "ctl00_MiddleContent_TopicTableMain" cellspacing = "0" cellpadding = "0" align = "Center" border = "0" style = "width:100%;border-collapse:collapse;" > < tr > < td class = "bg1gridmenu" align = "left" valign = "top" style = "white-space:nowrap;" > < div id = "gridmenu" > < ul > < li > < a id = "ctl00_MiddleContent_lnkAllPosts" class = "linkWhite1" href = " forumtree.aspx " > All Posts< / a > < / li > < li > < a id = "ctl00_MiddleContent_lnkUnanswered class = "linkWhite1" href = " / forumtree.aspx?unanswered = 1 " > Unanswered Questions< / a > < / li > < li > < a id = "ctl00_MiddleContent_lnkToughQuestions" class = "linkWhite1" href = " / forumtree.aspx?tough = 1 " > Tough Unanswered Questions< / a > < / li > < li > < a id = "ctl00_MiddleContent_lnkMyFeedBacks" class = "linkWhite1" href = " forumtree.aspx?userid = 8c8a4871-9ba0-4c98-8711-881061a25a8d " > My Posts< / a > < / li > < li
one of the template i.e. simple from here http: / / msdn.microsoft.com / en-us / asp.net / aa336613.aspx I have modified it for a master page as . <% @ Master Language = "C#" AutoEventWireup form id = "form1" runat = "server"> <!- - TOP NAV - -> < div id = "mainnav-container"> < div id = "mainnav"> < div class = "none"> < a href = "#maincontent"> skip to the main content area of this page < / a > < / div Join.aspx" title = "Please join Us."> Join < / a > < / AnonymousTemplate > < / asp : LoginView > < / li > < / ul > < / div > < div class = "clear"> < / div > < / div > <!- - SITE NAME & SLOGAN - -> < div id = "header"> < a href = "#" title = "abc"> my < / a div > < / div > < / div > < div id = "content-container"> <!- - SIDE COLUMN LEFT- -> < div id = "content-side"> <% - -<ul class = "link-list-vertical"> <li> About Us< / a> < / li> < / ul> - - %> Menu < br / > < asp : Menu CssClass = "menu asp : MenuItem Text = "New Item" Value = "New Item"> < / asp : MenuItem > < / Items > < / asp : Menu > < / div > <!- - MAIN CENTER COLUMN - -> < div id = "content"> < div > < asp : ContentPlaceHolder ID = "ContentPlaceHolderMain" runat = "server"> < / asp : ContentPlaceHolder > < / div > <!- - FOOTER Css File body { font-family : Geneva, Arial, Helvetica, sans-serif ; color : #666666 ; margin : 15px 40px ; background : #C7C7CF url(bg-main.gif) repeat-x ; font-size : .72em ; } #content p , #content-side-2 solid #7F7F7F ; border-right : 1px solid #7F7F7F ; border-left : 1px solid #EDEDED ; margin-bottom : 1px ; background : #FFFFFF url(bg-topnav.gif) repeat-x ; } #mainnav { float : left ; width : 70% ; } #mainnav-side { float
CSS in Asp.net Hi, I want to use CSS in my aspx page. Please tell me the making CSS example< / title> <link href = "mystyle.css" rel = "stylesheet" type = "text / css" / > < / head> <body> <p class = "undelineText"> This text will be displayed with a underline. Style applied by defining and applying styl class name< / p> <div id = "boldText"> This text will bold. Style applied using CSS ID that CSS is strictly case-sensitive. Also keep in mind that you have to mention relative url (relative to page path ) in link href attribute. I hope this small reply cum tutorial on 1999 / xhtml"> <head runat = "server"> <title> Untitled Page< / title> < / head> <body> <style> #nav {height:20px;background:#555;z-index:1;position:relative;width:978px;margin-left:-2px;} #nav ul {margin:0;} #nav li {list-style:none;float
visibility) { if (visibility) { ModalPopupExtender1.Show(); } else { ModalPopupExtender1.Hide(); } } follow http: / / www.codeproject.com / Articles / 34996 / ASP-NET-AJAX-Control-Toolkit-ModalPopupExtender-Co http: / / deepumi.wordpress.com / 2010 / 03 / 20 / asp-net-3-5-ajax-modal-popup-extender-with-user-control-event-bubbling / < cc1 : ModalPopupExtender TargetControlID = " Button3 runat = "server" BackColor = "white" Height = "300px" Width = "400px" Style = "display: none" BorderWidth = "1" BorderColor = "#108EBF"> <center> <a style = "font-family: Verdana; color: #108EBF; font-weight: bold; font-size: 14px; position: relative; top: 20px;"> Login Panel< / a> <div id = "login" runat = "server" style = "width: 400px; height: 200px 0px red; margin-top: 50px;"> <div style = "width: 300px; height: 40px; border: solid 0px red; float: left"> <asp:Label ID = "lblmsg1" runat = "server" ForeColor = "#108EBF" Font-Bold = "True" Font-Names = "verdana" Font-Size = "11px" Height = "25px" Width = "100px" Style = "left: 0px; position: relative; top: 5px"> EmailId :< / asp:Label> <asp:TextBox ID = "txtusername" runat = "server" Style = "width: 175px; height
webpages that tell you how to do this. I am currently using AJAX toolkit and asp.net it would be nice If I could do it using these two technologies but I ajax_ _calendar . ajax_ _calendar_container { padding : 4px ; position : absolute ; cursor : default ; width : 170px ; font - size : 11px ; text - align : center ; font - family : tahoma , verdana , helvetica ; FILTER : alpha ( opacity = 0 );} . ajax_ _calendar . ajax_ _calendar_body { height : 139px ; width : 170px ; position : relative ; overflow : hidden ; margin : auto ;} . ajax_ _calendar . ajax_ _calendar_days , . ajax_ _calendar_months , . ajax_ _calendar_years { top : 0px ; left : 0px ; height : 139px ; width 170px ; position : absolute ; text - align : center ; margin : auto ;} . ajax_ _calendar . ajax_ _calendar_container TABLE { font - size : 11px ;} . ajax_ _calendar . ajax_ _calendar_header { height : 20px ; width : 100 %;} . ajax_ _calendar . ajax_ _calendar_prev { cursor : pointer ; width : 15px ; height : 15px ; float : left ; background - repeat : no - repeat ; background - position : 50 % 50 %; background - image : url ( images / arrow - left . gif ");} .ajax_ _calendar .ajax_ _calendar_next {cursor:pointer;width