...

View Full Version : Repeated Image Header



ttttt
12-09-2006, 05:27 PM
Hi,
Basically, I'm trying to build a website with a gradient header and some text, or logo, over it, like here: http://www.istockphoto.com .
I just can't work out how to do it.
Can you help?
Thanks,

Excavator
12-09-2006, 08:06 PM
Can you show us some code so we can see what your trying to do?

ttttt
12-09-2006, 08:19 PM
Well, I'm trying to make a header like in the website I linked to. I don't have any code at the moment, all I have is the idea.
Thanks For The Reply,

Excavator
12-09-2006, 08:39 PM
I'm sorry, it's really easy, I was just feeling pretty dumb explaining basics to someone that's got more than 300 posts on this board.

Once you get your image the way you like, just make it the background of a div. Then it's no big deal to place text in the div like normal and the picture will still be in the background.

CSS would be

#header {
width: 765px;
height: 140px;
margin:0 20px 0 0;
background-image: url(img/gradient1.png);
}

and markup would look like...

<div id="header">
<h1>company slogan here</h1>
</div>

Majoracle
12-09-2006, 08:56 PM
It's a little difficult to explain not knowing what exactly what you have to work with, but I'll give it a shot:

----------

CSS:

#header {
display: block;
background: #FFF url('background_gradient_img.gif') 0 0 repeat-x;
margin: 0;
padding: 0;
width: 780px;
height: 80px;
}

#logo {
float: left;
width: 200px;
height: 80px;
border: 0;
}

#nav {
float: right;
margin: 0;
padding: 10px 15px 0 0;
width: auto;
height: auto;
}

#nav a {
color: #FFF;
}

HTML:

<div id="header">
<a href="www.yoursite.com"><img id="logo" src="sitelogo.gif" /></a>

<div id="nav">
<a href="#">Link Here</a> |
<a href="#">Link Here</a> |
<a href="#">Link Here</a> |
<a href="#">Link Here</a>
</div>
</div>

----------

That should give you what you're looking for. Of course you'll have to edit heights and widths to suit your layout, but it'll look a lot like the example you showed.

ttttt
12-09-2006, 09:06 PM
Both of those don't work. That's basically what I've already tried.
Can you help?
Thanks,

Excavator
12-09-2006, 09:24 PM
To do it like they did on the page you link to, just look at their code. They are showing you how by doing it.
I think to get any more specific help than we've given already your going to have to be more detailed in explaining what your trying to do.

ttttt
12-10-2006, 11:36 AM
Don't worry, solved.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum