CSS - Image To Fill Header Area..

Hi,

Is there a relatively simple way to place an image over the main background of a site, on the right of the main design?

For example, see how the Keller Williams logo is on the right, over the background he

http://www.groundedgroup.com/client...Interface3.html

Ideally, I want to make it happen he
http://www.groundedgroup.com/clients/NWR/

It would be great if the image was always just a little bit to the right of the main design, like shown above. Any ideas?

Thanks.

is there a way to have a different background image in the .content area on different pages?

this is the site:
http://bradleyrose.net/WaterStreetRestaurant/pages/catering&parties.html

cobble-stone-road-4.jpg is used on all pages, is there a way to use a different image on some pages?

Trying to delete my post but no option to delete so just removing content.

Can anyone suggest how I make sure the green 'Quick Contact' graphic/box always sit at the bottom of the right column (immediately above the Footer), no matter how much text there is in the lefthand column on this web page: www.ultimate-system.com/index.html , using css?

The stylesheet I'm using is found at www.ultimate-system.com/style.css.

Many thanks

Hello

I thought I could make it, but what I got so far is jumping over the screen, so please a need some help.

I got a image with two transparant shapes.
Behind those shapes I would like to show 2 other images.

|-------1-------|
| |-----| |----| |
| |...2..| |..3..| |
| |____| |____| |
|_____________|

Image 1 should be on top z-Index
Image 2 should under image 1, a part of the image should be visible.
Image 3 should under image 1, a part of the image should be visible.

Now the issue, image 2 and 3 should be dynamically replaceable.

Please help

Thanks

What I hope to do is have a header with a left "cap" a right "cap" and a background tiling across connecting the two if that makes any sense whatsoever so if L is the left image B is the background image and R is the right image it would look like this...

LBBBBBBBBBBR

Anyway, I've ALMOST got it working. The only thing missing is the image on the right. I have this code in an html table cell:

Code:

<div id='logographicinner'>
          <div id='logostrip'>
            <div id='logographic'><div id='catname'>{$data['cat_name']}</div></div>
            </div>
            </div>

and this in the css
Code:

#logostrip{
background-color: #ffffff;
background-image: url(images/headerbg.gif);
height: 29px;
margin: 0px;
padding: 0px;
}

#logostripinner{
background-color: transparent;
background-image: url(images/headerright.gif);
background-position: right;
background-repeat: no-repeat;
height: 29px;
margin: 0px;
padding: 0px;
}

#logographic{
background-color: transparent;
background-image: url(images/headerleft.gif);
background-position: left;
background-repeat: no-repeat;
height: 29px;
margin: 0px;
padding: 0px;
}

#catname{
text-align: left;
padding-top: 7px;
padding-left: 20px;
font-weight: bold;
}

Any ideas what I've done wrong?

Okay, I'm no newbie on using CSS but the long story short is that I bought software for a shopping cart and had to use their pre-made template in order to keep the peace. I of course, being a web designer changed the template to my own liking, but can NOT get this header centered for the life of me! I have tried everything I know, including things I have looked up, nothing will work.

Here is the main.css (only css file being used)

Code:

body {
     color: #ffffff;
     background-color: #000000;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     text-align: left;
     margin:auto;
     text-align:center;
     margin:0 auto;
     }

a {
     color: #d92f2f;
     font-weight: normal;
     text-decoration: underline;
     cursor: pointer;
     }

p {
     margin: 0px 0px 7px 0px;
     }

sup {
     display: inline;
     padding: 0px;
     vertical-align: super;
     font-size: 8px;
     }

a:hover {
     color: #ffb4b4;
     }

legend {
     display: none;
}


label {
     display: none;
}

fieldset {
     border: none;
     padding: 4px 0px 4px 5px;
    }

fieldset p {
     display: block;
     margin: 5px 5px 5px 2px;
     }

form {
     margin: 0px 0px 5px 0px;
     }

img {
     border: none;
     }

li {
     padding-bottom: 5px;
     }

/* +------------------------------------------------------------+ */
/* | General XHTML Classes                                      | */
/* +------------------------------------------------------------+ */

.center {
     text-align: center;
     }

.inlinecenter {
     text-align: center;
     }

p.inline {
     display: inline;
     padding: 0px;
     }

.strong {
     font-weight: bold;
     }

.big {
     font-weight: bold;
     font-size: 16px;
     }

.hidden {
     display: none;
     }

a.unfancy {
     color: #d92f2f;
     font-weight: normal;
     text-decoration: underline;
     cursor: pointer;
     }

/* +------------------------------------------------------------+ */
/* | Skin Specific Divs                                         | */
/* +------------------------------------------------------------+ */


#skin_header {
     height: 230px;
     width: 899px;
     margin:auto;
     padding: 0px;
     background-position: center top;
}
     
#skin_wrapper {
     width: 910px;
     padding: 0px;
     margin:auto;
     }

#skin_wrapper_full {
     width: 100%px;
     padding: 0px;
     margin:auto;
     background-image: url('../media/header.png')
     background-repeat: repeat-x;
     background-position:  top left;
     }

#skin_ct {
     width: 100%;
     padding: 0px;
     margin: auto;
     border-spacing: 0px;
     border-collapse: collapse;
     }

#skin_ct_lcol_head {
     font-size: 16px;
     font-weight: bold;
     padding: 10px;
     margin: auto;
     width: 160px;
     height: 80px;
     }

#skin_ct_rcol_head {
     font-size: 16px;
     font-weight: bold;
     padding: 10px;
     margin: auto;
     height: 80px;
     text-align: right;
     }

#skin_ct_lcol {
     padding: 20px 10px 10px 10px;
     margin: 0px;
     vertical-align: top;
     width: 160px;
     text-align: left;
     }

#skin_ct_mcol {
     padding: 20px 10px 10px 10px;
     margin: 0px;
     vertical-align: top;
     line-height: 150%;
     }

#skin_ct_rcol {
     padding: 2px 10px 10px 10px;
     margin: 0px;
     vertical-align: top;
     width: 160px;
     }

#skin_footer {
     color: #FFFFFF;
     background-color: #000000;
     padding: 50px 10px 10px 10px;
     margin: 0px;
     text-align: center;
     background-image: url('../media/footer.png');
     background-repeat: repeat-x;
     background-position:  top left;
     }

#skin_pgtitle {
     font-size: 16px;
     padding: 0px 0px 4px 0px;
     margin: 0px 0px 10px 0px;
     font-weight: bold;
     border-bottom: 1px solid #999999;
     }

#skin_content {
     margin: auto;
     }

There is more coding but the actual image header is located inside of the #skin_header.

Also, here is the PHP code where the SRC code is located:

Code:

</head>

<body>


<div id="skin_header" align="center">
<img src="skins/Default/media/logo.png" alt="Home" width="899" height="230" align="center" style="margin:auto;"/>
</div>

<div id="skin_wrapper_full"><div id="skin_wrapper">




<table id="skin_ct">

<tr>


<td id="skin_ct_rcol_head" colspan="3">

<div id="skin_menu_head">

<ul>

<?php 
if (!(empty($link_home)))     {print '<li><a href="' . $link_home . '" title="Home">Home</a></li>';}
if (!(empty($link_cart)))     {print '<li><a href="' . $link_cart . '" title="Shopping Cart">Shopping Cart</a></li>';}
if (!(empty($link_checkout))) {print '<li><a href="' . $link_checkout . '" title="Checkout">Checkout</a></li>';}
if (!(empty($link_account)))  {print '<li><a href="' . $link_account . '" title="Your Account">Your Account</a></li>';}
if (!(empty($link_contact)))  {print '<li><a href="' . $link_contact . '" title="Contact">Contact</a></li>';}
?>

</ul>

Please, ANY help would be appreciated, I want to get this site live, pronto. The link is www.PhantomSupplements.net

thank you!

Hey,

Im pulling my hair out...basically iv developed a site testing it in safari and when i have come to test it in FF the background image i am displaying in my header div doesn't display in FF but displays fine in Safari, unable to check IE atm.

Iv broken down my code down and put together a simple test html script and css script and still no joy. Below is the script can anyone see where i am going wrong...hope so.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Background Image Test</title>
<link rel="stylesheet" type="text/css" href="millar.css" />
</head>
<body>
	<div id="container">
		container
		<div id="header">
			header
		</div>
		<div id="main">
			main
		</div>
		<div id="footer">
			footer
		</div>
	</div>
</body>
</html>

Code:

body {
	background-color: #F0F0F0;
	font-family: verdana;
	font-size: 10px;
	color: #333333;
}
#container
{
	background-color: red;
	margin: 0 auto;
	
}

#header
{
	background-color: yellow;
	height: 100px;
	background-image: url('topbanner.jpg');
}

#main
{
	background-color: blue;
}

#footer
{
	background-color: green;
}

cheers
tom

Hi again, i have another issue i can't get my head around. As before i'm sure it will be an easy solution.

basically, i currently have an image 1px wide with 100px height which is repeated accross the page, basically i want the top left and top right corners to be cornered.

Any ideas people?

Code:

div.header
{
	padding:0em;
	color:white;
	background-image:url(bg.jpg);
	background-repeat:repeat-x;
	clear:both;
	margin:0 auto;
}

erm does rounded make more sense?, hang on let me find an example.

http://a-ccarsales.com/page3.htm

see like their header has rounded corners, thats what i want. However theirs is fixed, i want mine elastic but with the rounded corners, sorry if i'm not explaining this very well..

Look - I'm 59....almost 60 - and I've been using tables forever. So please forgive, what I am certain, is a fairly stupid question. But I have been trying to wrap my head around CSS and I have struggled with it for the last couple of years..... It's like Algebra, for me - it seems as though it's something I can never really learn.

I am trying to re-build an old site and avoid using tables. All I want to do is put an image - positioned absolutely - in a DIV header area. I've managed to get the page, by the way, to display the header, the footer, a fix-width center area, etc. just fine - which is no small miracle, for me. What I've got, now, looks like this:


The code looks like this:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<style type="text/css">
body {margin: 0 0 0 0; background-color: #E1DACD;}
#header {width: 100%; height: 120px; background-color: #F1E2C2;}
#social {position: absolute; top: 26; left: 730;}
#container {
 	margin-left: auto;
 	margin-right: auto;
 	width: 960px;
 	text-align: left;
 	background-color: #FFF;
    height: 600px;
 	}
#footer {width: 100%; height: 80px; background-color: #EFE1C1;}
h2 {font-family: arial; font-size: 21px; font-weight: normal; display: inline;}
</style>
</head>

<body>
<div id="header"><img src="head1.gif">
<div id="social"><img src="22s.gif"></div>
</div>

<DIV id="container">
<DIV style="padding-left: 12px;"><h2><br>Some content...</div>
</div>
<div id="footer">footer</div>

How in the heck do I get that social networking .gif to end up in the header, to the right of the domain name....?

Any help would be greatly appreciated.

Hi,

I guess I can't post the URL of my test page with the problem which would make it a lot easier to explain. I don't quite see why anyone would want to re-create the page from pasted code when they could just look at the actual page but oh well.

Anyway, I'm working on a website that is supposed to look like a folder -- it is composed of a top graphic, content area, bottom graphic, all wrapped in an outer div.

It looks like it ought to in Firefox. In IE there is a gap between the top graphic and the main content div. I've tried making sure all relevant margins, padding etc are set to 0. I can't put the top graphic inside the content div (fixed a similar problem this way on another project) as it is wider!

Here is the page code:

Code:

<%@ LANGUAGE=JScript %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<link rel=stylesheet type="text/css" HREF="kahn.css">
<title>Crollard Kahn</title>
</head>

<body>

<div class="Outer">

<img src="images/top2h.png" style="border: none; margin: 0; padding: 0;">

<div class="Main">

<div class="InnerMain">

<div style="text-align: left; padding: 10px; margin: 0 0 10px 0; background-color: #5C0D10; color: ffffc2; font-size: medium;">
	<!--<img src="home_selected.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0">-->
	Top navigation bar here...
</div>

<div class="Left">
	<div class="InnerLeft">
		Left navbar<br>here<br>...<br>...<br>...<br>...
	</div>
</div>

<div class="Right">
	<div class="InnerRight">
		<h1 class="Header1 Top">Header</h1>
		<p>Text.</p>
		<p>More Text.</p>
		<p>More Text.</p>
		<p>More Text.</p>
	</div>
</div>

<div style="clear: both; margin: 0; padding: 0;"></div>

</div> <!-- InnerMain -->

</div> <!-- Main -->

<img src="images/footer2.png" style="border: none; margin: 0; padding: 0;">

</div>	<!-- Outer -->

</body>

</html>

Here is the stylesheet:
Code:

BODY { background: #868B6B; margin: 0; padding: 0; text-align: center; font-family: MS Sans Serif; color: black;} 

DIV.Outer { width: 980px; background-color: #868B6B;  margin-left:auto; margin-right:auto; margin-top: 0;}
DIV.Main { width: 950px; background-color: #ffffc2; padding: 0 0 10px 0;  margin-left:auto; margin-right:auto; margin-top: 0;}
DIV.InnerMain { width: 918px; background-color: #ffffd9; padding: 0 0 10px 0;  margin-left:auto; margin-right:auto;}

DIV.Left {float: left; width: 220px; text-align: center; padding: 0 0 0 0; }
DIV.InnerLeft {width: 212px; margin-left: auto; margin-right: auto; padding: 0 0 0 0;}

DIV.Right {float: right; width: 696px; padding: 0 0 0 0; text-align: center; border-left: 1px solid #5C0D10;}
DIV.InnerRight {width: 668px; margin-left: auto; margin-right: auto; padding: 0 0 0 0; text-align: left;}

.Header1 { font-weight: bold; font-size: x-large; font-family: Times New Roman; color: #5B0D0F; font-variant: small-caps; }
.Header2 { font-weight: bold; font-size: large; font-family: Times New Roman; color: #5B0D0F; font-variant: small-caps; }
.Question { font-weight: normal; font-style: italic; color: black; font-variant: small-caps;}
.Answer { color: black; }
.CK { font-variant: small-caps; }
.Topic { font-weight: bold; color: black; }
.TopicLink { font-weight: bold; color: black; text-decoration: underline; }

P.List { margin-bottom: 2em; }
.Top { margin: 0; } 	/* weird firefox blank space otherwise */

I'm fairly new to CSS, but am trying to leave tables behind as much as possible.

Can anybody please tell me how to fix this?

Regards,

Elisabeth

Wondering if anyone can tell me why there is a gap above my header image. Surely I am missing something in Firebug?

h**p://www.topofferspage.com

I had been helped on this board previously with this question for a site I was working on. I am using the same approach on another site to link back to the home page from the internal pages. And for all intents and purposes it is working. However I could/can not figure out how to precisely position where the link starts and ends.

http://www.guestwardho.com/campground_map.html


If, for example, you go to the above page and put your mouse over the header image you will see the link begins at the left edge of the header image. If you move to the right the link 'ends' a little more then half way across the image - at the uppercase 'H' in 'Ho' for reference. Again, this is fine for this purpose/site, but cannot figure out how to control where the link area starts and ends.


Thank you in advance for your assistance.

I'm trying to get something that looks like this:



Here is the xhtml:

Code:

<div id="container">
                <div class="design_box">
			<img src="images/image.png" alt="" />
                        <h1>Header goes here</h1>
                        <p>Paragraph goes here</p>
		</div>
		<div class="design_box">
			<img src="images/image.png" alt="" />
                        <h1>Header goes here</h1>
                        <p>Paragraph goes here</p>
		</div>
		<div class="design_box">
			<img src="images/image.png" alt="" />
                        <h1>Header goes here</h1>
                        <p>Paragraph goes here</p>
		</div>
</div>

Here is the relevant css:

Code:

.design_box {
	display: block;
	margin-bottom: 17px;
}

#row_a_right_web_design img {
	float: left;
}

.design_box h1 {
	color: #fbfbfb;
	font: bold .9em Tahoma, arial, sans;
	margin-bottom: 4px;
}

.design_box p {
	color: #c4c2c2;
}

Needless to say, the above css does not produce the desired outcome. I'm having a serious brain-fart as to what the best way is to tackle this.

Thanks in advance.

I am trying to get my header image to stretch 100% width in the browsers. Right now it's centered--and too short.

My CSS code:


body {
font-family: Verdana, Arial Black, Trebuchat MS, Arial, Geneva;
background-color: #1c1c1c;
background-repeat:repeat-x;
border-color: #FC3;
border-width: 1px;
padding: 25px;
margin: 30px;
color: #FFC;
}


#header {
height: 200px;
width: 100%;
margin: 0;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
margin-right: 0px;
margin-left: 0px;
border: thin solid #FFF;
border-style:none;
}


#header {
height: 200px;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

}


#p {
padding-left:inherit;
padding:inherit;
}






A:link {color:#FFF; text-decoration:underline; }
A:visited {color:#CCC; text-decoration:underline; }
A:hover {color:#FFC; text-decoration:underline; }
#nav {
height: 35px;
}




I've tried:
width: 100%;

and

width: 100%;
width: auto;



There is nothing useful online that has really touched on this problem. The only solutions are the "width 100%"

Any help would be so great please.