PDA

Click to See Complete Forum and Search --> : problem showing div background image

rutledj
03-22-2007, 11:45 AM
I'm trying to display a background image in a div I'm using as a header.
I'm using Themes in Visual Studio and have a themes folder with an img folder inside that containing the image. In web.config I have told it to use this theme.
I can change fonts, background color, etc in the stylesheet (inside the theme folder) but cannot make the image display.

If I don't use themes and use a stylesheet in the root folder with the background-image property still pointing to the image in the Themes folder, it works.

Here is my code:

<body>
<form id="form1" runat="server">
<div>
<div class="bannerbox">
<h5>2020 South Park Drive</h5><br />
<h5>Reidsville, NC 27320</h5>
<img alt="Reidsville Christain Church" src="images/churchbuilding.jpg" />
</div>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
</form>
</body>



Here is the css:


body
{
margin: 0 auto;
text-align: center;
font-family: Verdana;
}

.bannerbox
{
background-image: url(App_Themes/Maroon/img/bannerboxmaroon.gif);
width: 850px;
top:2%;
}

.bannerbox h5
{
float: left;
left: 5%;
position: relative;
top: 60%;
}
.bannerbox img
{
float:right;
margin-right:2%;
}



Here is a link to what the page looks like: http://www.cooltoneamps.com
KDLA
03-22-2007, 12:10 PM
When you say that your image doesn't display, does that mean that a color or something else is displaying instead?
It could be that you need to set the entire background property:

.bannerbox
{
background: transparent url(App_Themes/Maroon/img/bannerboxmaroon.gif) no-repeat;
width: 850px;
top: 2%;}

KDLA
}
rutledj
03-22-2007, 12:14 PM
The page (body) background is not set (I want it white). The <div class="bannerbox"> background color isn't set either. I'm using the background image as the color because the image has rounded corners, which is how I want the div to appear. The image is just a maroon rectangle (with rounded corners) that is 850px wide.

Like I said, if I just put this in a separate style sheet and link it to the page it will display correctly. It just doesn't work from the css file in the theme folder.
WebJoel
03-22-2007, 12:31 PM
... The image is just a maroon rectangle (with rounded corners) that is 850px wide.... -so your visitors using dial-up can sit and wait what, 20-minutes or more for the page to load? :confused: -How about using a color for the background-color, and position four little teeny-tiny images in the four cardinal corners of the DIV, each 'corner image' having the rounded shape of the desired curvature? Here is a simply template that demonstrate the idea:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small;}
/*font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.2em; margin-top:6px;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em; margin-top:12px;}
h2{font-size: 1.72em; margin-top:12px;}
h3{font-size: 1.52em; margin-top:12px;}
h4{font-size: 1.42em; margin-top:12px;}
h5{font-size: 1.32em; margin-top:12px;}
h6{font-size: 1.21em; margin-top:12px;}
</style>

<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>

<div style="position:relative; width:82%; height:300px; padding:40px; margin:20px auto; background-color:maroon;">
<img src="#" style="position:absolute; left:0; top:0; width:30px; height:30px; border:1px solid black;" />
<img src="#" style="position:absolute; left:0; bottom:0; width:30px; height:30px; border:1px solid black;" />
<img src="#" style="position:absolute; right:0; bottom:0; width:30px; height:30px; border:1px solid black;" />
<img src="#" style="position:absolute; right:0; top:0; width:30px; height:30px; border:1px solid black;" />

<p style="color:white;">
This is the text of this DIV. It is merely for placeholding purposes. You would replace this with your text and other content. This DIV needs to be RELATIVE-positioned in order to 'position' the four corner images that create the illusion of a rounded-corner box. This box will expand if you add more text AND change the height to "auto;".
</p>

</div>
</body>
</html>
rutledj
03-22-2007, 12:55 PM
WebJoel,

What you say is correct. I was merely testing the idea of using themes to do this. If the background-image want show up now I don't 4 rounded corner images will either. For right now I'm just concerned with getting it to work at all.
KDLA
03-22-2007, 01:20 PM
Try using an absolute path to the image, rather than a relative one. It could be that the scripting driving the theme is in another location, other than the actual theme folder.
sticks464
03-22-2007, 03:37 PM
Take a look here (http://www.curvycorners.net/examples.php), this may be what you want for rounded corners. Works great for me without any images.