How to Set CSS to Add an Asp Img

how do you set css to add an asp img?

Chances are no.

If you mean an image server control (either <asp:Image> or `) CSS is a client-side technology while any Asp.NET server controls are server-side. (keyword: in server controls is server ;) )

If you mean an HTML image (<img> with no runat="server") then no again. You'd use JavaScript to do this: CSS cannot add elements (things with tags like <img>) to the document. It can add text context using the content property but not elements like <img>.

Lastly, if you mean give "the div" a background image, yes, CSS can do this, using the background-image property... but I don't think you can resize background images. Maybe with CSS3... I'm not sure.

Apply CSS Class to Image in asp:Hyperlink?

It looks like you're using the ImageUrl property of HyperLink. I would recommend creating the inner image control explicitly:

<asp:HyperLink runat="server" CssClass="linkclass" NavigateUrl="http://example.com">
   <asp:Image runat="server" CssClass="imgClass" ImageUrl="yourimage.jpg" />
</asp:HyperLink>

Can I add an image to an ASP.NET button?

Why not use an ImageButton control?

Specify Image Height px/% in ASP.NET in CSS (Cascading Style Sheet)

MyGuruG was on the right track, here is what I had to do:

ASP Code:

<!doctype HTML public "-//W3C//DTD HTML 4.0 Transitional//EN" >
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "w3.org/TR/html4/strict.dtd"> -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title>Home</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<!-- Set Page Format Table - START -->
<asp:Table CssClass="MainTable" runat="server" CellPadding="0" CellSpacing="0">
<asp:TableRow CssClass="HeadSpace">
<asp:TableCell ColumnSpan="6">
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell RowSpan="3">
<asp:Image ImageUrl="Images/Border/indent.jpg" runat="server"  CssClass="LeftPageIndent" AlternateText="Border Indent" />
</asp:TableCell>
<asp:TableCell>
<asp:Image ImageUrl="Images/Border/tlc.jpg" runat="server" AlternateText="Top Left Border Corner" Width="10px" Height="10px" />
</asp:TableCell>
<asp:TableCell ColumnSpan="2">
<asp:Image ImageUrl="Images/Border/tp.jpg" runat="server" AlternateText="Top Border" CssClass="BorderTop"/>
</asp:TableCell>
<asp:TableCell>
<asp:Image ImageUrl="Images/Border/trc.jpg" runat="server" AlternateText="Top Right Border Corner" Width="10px" Height="10px" />
</asp:TableCell>
<asp:TableCell RowSpan="3">
<asp:Image ID="Image1" ImageUrl="Images/Border/indent.jpg" runat="server" CssClass="RightPageIndent" AlternateText="Border Indent" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:Image ImageUrl="Images/Border/ls.jpg" runat="server" AlternateText="Left Border Side" Height="100%" Width="10" />
</asp:TableCell>
<asp:TableCell ColumnSpan="2">
<form id="Form1" runat="server">
<div class="page">
<p align="center">
<img src="Images/Border/logo.jpg" alt="Logo" border="0" /></p>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<p class="FootSpaceText">Copyright © All Rights Reserved</p>
</div>
</form>
</asp:TableCell>
<asp:TableCell>
<asp:Image ImageUrl="Images/Border/rs.jpg" runat="server" AlternateText="Right Border Side" Height="100%" Width="10" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell CssClass="blc">
<asp:Image ImageUrl="Images/Border/blc.jpg" runat="server" AlternateText="Bottom Left Border Corner" />
</asp:TableCell>
<asp:TableCell CssClass="btm" ColumnSpan="2">
<asp:Image ImageUrl="Images/Border/btm.jpg" runat="server" AlternateText="Bottom Border" Width="100%" Height="10px" />
</asp:TableCell>
<asp:TableCell CssClass="brc">
<asp:Image ImageUrl="Images/Border/brc.jpg" runat="server" AlternateText="Bottom Right Border Corner" Width="10px" Height="10px" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow CssClass="FootSpace">
<asp:TableCell ColumnSpan="6">
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<!-- Set Page Format Table - END -->
</body>
</html>

My CSS Code:

/* DEFAULTS
----------------------------------------------------------*/

body
{
background: #000000;
font-size: .80em;
font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}

a:link, a:visited
{
color: #034af3;
}

a:hover
{
color: #1d60ff;
text-decoration: none;
}

a:active
{
color: #034af3;
}

.FootSpaceText
{
text-align: center;
}

/* Page Border Setup...
----------------------------------------------------------*/

.MainTable
{
width:100%;
height:100%;
}

.HeadSpace
{
height: 17px;
}

.LeftPageIndent
{
width: 140;
}

.RightPageIndent
{
width: 140;
}

.tlc
{
width: 10px;
height: 10px;
border: 0px;
}

.tp
{
width: 100%;
height: 10px;
border: 0px;
}

.trc
{
width: 10px;
height: 10px;
border: 0px;
}

.blc
{
width: 10px;
height: 10px;
border: 0px;
}

.btm
{
width: 100%;
height: 10px;
border: 0px;
}

.brc
{
width: 10px;
height: 10px;
border: 0px;
}

.FootSpace
{
height: 17px;
}

/* Boarder Image Setup...
-----------------------------------------------*/

.BorderTop
{
width: 100%;
height: 10;
border: 0;
}

LSideBdrImage
{
width: 10;
height: 100%;
}

RSideBdrImage
{
width: 10;
height: 100%;
}

.BorderBottom
{
width: 100%;
height: 10;
border: 0;
}

/* HEADINGS   
----------------------------------------------------------*/

p
{
margin-bottom: 10px;
line-height: 1.6em;
}

h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}

h1
{
/*-- Page Header Heading --*/
font-size: x-large;
padding-bottom: 0px;
margin-bottom: 0px;
color: #CCFF33;
}

h2
{
/*-- Page Header Heading 2 --*/
font-weight: bold;
color: #FF9900;
}

h3
{
/*-- Bold Red Serious Text --*/
font-weight: bold;
color: Red;
}

h4
{
/*-- Page Sub-Heading --*/
font-size: 1em;
padding-top: 1px;
padding-bottom: 1px;
margin-bottom: 0px;
font-variant: normal;
color: #FF9900;
}

h5
{
/*-- Page Heading 3 --*/
font-size: 2.2em;
font-weight: bold;
color: #FF9900;
}

/* PRIMARY PAGE CONTENT LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
width: 100%;
background-color: #000000;
margin: 1px auto 0px auto; 
}

.main
{
padding: 0px 12px;
margin: 12px 8px 8px 0px;
min-height: 100%;
width: 100%;
}

/* PRIMARY PAGE CONTENT TABLES  
----------------------------------------------------------*/

.MainContent
{
width:100%;
}

.CellBorder
{
/* -- border:1px solid #333333; --*/
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #333333;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #333333;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #333333;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #333333;
}

The Code that makes this work is as follows.

First:

<!doctype HTML public "-//W3C//DTD HTML 4.0 Transitional//EN" >

I am dumb-founded by this. Maybe someone can explain why "doctype" needed to be changed? Surely all Pages have a standard set of basic requirements and the Height would be part of that?

Second:

<asp:Table CssClass="MainTable" runat="server" CellPadding="0" CellSpacing="0">
<!-- Table Content Here -->
</asp:Table>

I tried the standard HTML Table but this did not work for me so I had to use the ASP:Table Tags instead.

Third:

.MainTable
{
width:100%;
height:100%;
}

The ASP:Table needs to have its Height and Width set, or this wont work.

Fourth:

<asp:Image ImageUrl="Images/Border/ls.jpg" runat="server" AlternateText="Left Border Side" Height="100%" Width="10" />

I had to set the Height and Width in the ASP:Image Tags. Setting the Height and Width in CSS would not work for me.

Also, I had to use a work around to set the Table Indent:

<asp:TableCell RowSpan="3">
<asp:Image ID="Image1" ImageUrl="Images/Border/indent.jpg" runat="server" CssClass="RightPageIndent" AlternateText="Border Indent" />
</asp:TableCell>

I set the ASP:TableCell Width Property but only the Left Side worked. The Right Side would not work at all.

I think thats all, it was a real pain in the you know whats to get to the bottom of this silly problem. I cant believe its so difficult to do this simple task. I have to give this answer to MyGuruG as this was really the basic overall problem Thanks MyGuruG.

ASP.NET Linking to resources (img, css, js) from different paths

Mostly ~ operator is used, the asp.net automatically maps it to the root of your application.

<head runat="server">
<img src="~/gfx/images/picture.jpg">
<link rel="stylesheet" type="text/css" href="~/gfx/css/stylesheet.css"/>
</head>

you can also use application root path in variable and can use. For Example

<head>
<img src="<%=SomeClass.SITEURL%>/gfx/images/picture.jpg">
<link rel="stylesheet" type="text/css" href="~/gfx/css/stylesheet.css"/>
</head>

The use of later technique has a few advantages, as it is rendered as absolute path (little bit fast)
and configurable in a sense if you want to place static content from different server.

How to send this image to front and set the bg to black

Try this code.Use the Position and z-index property

Fiddle

Adding asp.net image to div

No, you cannot add a server control to a literal representation of a DOM element.

I am not sure what type of control "test1" is, but you should change it out to a PlaceHolder control and do the following (not tested!):

 using (OdbcCommand cmd = new OdbcCommand("SELECT Wallpostings FROM WallPosting WHERE UserID=" + userId + " ORDER BY idWallPosting DESC", cn))
        {
            using (OdbcDataReader reader = cmd.ExecuteReader())
            {
                var divHtml = new System.Text.StringBuilder();
                while (reader.Read())
                {
                    System.Web.UI.HtmlControls.HtmlGenericControl div = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
                    div.ID = "test";
                    div.InnerHtml = String.Format("{0}", reader.GetString(0));
                    Image img = new Image();
                    img.ImageUrl = "~/images/test.jpg";
                    img.AlternateText = "Test image";
                    div.Controls.Add(img);
                    test1.Controls.Add(div);
                }
                test1.InnerHtml = divHtml.ToString();
            }
        }

Hope this helps!