When I added this code directly to my html file, it worked perfectly:
<style type="text/css" media="screen">
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
</style>
However, when I transferred it to my css file like this:
#headerimg
{
display: block;
background-image: url('/Content/images/epp/ebweblogo1.gif');
background-repeat: no-repeat;
background-position: center center;
width:100%;
height:100%;
margin: 0;
padding: 0;
}
This is the section in my html where I include it:
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg" />
I suspect the issue might be related to the image location, but I'm not entirely sure as I've experimented with different paths and configurations without success.
Any advice or recommendations would be greatly appreciated.
EDIT
Apologies for assuming you could read my mind.
After moving the css code to a separate css file (site.css), the image fails to display altogether. Despite attempting various path options, the image remains invisible regardless of what I try.
UPDATE #2
Upon modifying my html code to the following:
<div class="page">
<div id="header">
<div id="headerimg">test</div>
The image appears behind the text within a single line reading "test," rather than displaying at its actual size.
It seems that the issue lies in the dimensions of the div element. Even after adjusting the css to specify a height of 130px, the size remained unchanged.