help with images

hozdaman · May 6th, 2012, 08:01 PM

Hi,

I am trying get an image to show up on the header. Currently i have the url set on the CSS, but i don't know how to get it to display using _Header.cshml.

here is my css:

Code:

/*
--------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------
HTML Elements
--------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------
*/
*
{
    font-family: verdana, Arial, sans-serif;
    margin-left: 0px;
}

body
{
    margin: 0;
    background-color: #CDB38B;
    color: Black;
}

/*
--------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------
Site Structure
--------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------
*/
#header, #navstrip
{
    width:100%
}

#header
{
    background-image: url(images/header.png);
    width: 844px;
    height: 218px;    
}

#header a
{
    width:844px;
    height:138pcx;
    display:block;
}

#navstrip
{
    background-image: url(images/MenuBackground.png);
    width: 827px;
    height:36px;
    padding-top:7px;
    padding-left:17px;
}

#head, #nav, #wrapper
{
    margin: auto;
}

#wrapper
{
    width:844px;
    margin:auto;
}

#nav a, #nav a:hover, #nav a:visited
{
    color: #A0522D;
    font-size: 1.0em;
    text-decoration:none;
    padding: 5px, inherit;
}

#right_side, #content
{
    float: right;
    min-height:400px;
}

#right_side
{
    width: 180px;
    background-color:Aqua;
}

#content
{
    color:#777788;
    font-size:0.8em;
    width:850px;
    min-height:500px;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:20px;
    float:left;
    background-color:#778899;
    color:blue;
}

#footer
{
    clear:both;
    font-size: 90%;
    color:Black;
    text-align:center;
}

my _header.cshtml

Code:

<div id ="head"><p>Header</p></div>

my _Layout.cshtml

Code:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@Page.Title</title>
        <link href="@Href("~/Content/StyleSheet.CSS")" rel="stylesheet" type="text/css" />
        
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                @RenderPage("~/Shared/_header.cshtml")
            </div>
            <div id="navstrip">
                @RenderPage("~/Shared/_Navigation.cshtml")
            </div>
            <div id="side">
                <div id="right_side">This is where extra content goes</div>
            </div>
            <div id="content">
                @RenderBody()
            </div>
            <div id="footer">
                <p>This is where the footer goes</p>
            </div>
        </div>
    </body>
</html>

Any help would be appreciated.

Imar · May 7th, 2012, 03:26 AM

Hi there,

WIth CSS images are looked for relative to the location of the CSS file. So this:

background-image: url(images/header.png);

assumes that the folder that contains your CSS file has a subfolder called images that contains your images. Is that the case? Maybe you need this instead:

background-image: url(../images/header.png);

This would be the case if you had a folder called Styles and a folder called Images at the same level for example where the CSS resides in Styles and the images in the images folder.

Cheers,

Imar

hozdaman · May 8th, 2012, 10:01 PM

Thanks for all your help Imar.