...

View Full Version : Two header images



TheCase
04-13-2011, 02:19 AM
Hi,

Please see picture attached. I am new to CSS and unsure how to link two images together to make up the header. I have done two <img> html but this does not work very well.

As shown the image does not meet the top of the page how can I move it up? How can I also make the image 2 stretch to the full width of the users screen.

Thanks.

teedoff
04-13-2011, 02:30 AM
Can you show your code and what you've tried?

Is the actual image as you've posted above? or is it like 50px wide. If so you'd want to repeat it on the x axis.

TheCase
04-13-2011, 02:38 AM
Hi,

To bring the images closer to the page add



* {
margin:0;
padding:0;
}


Worked really good, but to make the image 2 fill all the width of page im stuck with I tried



width: auto;

and


width: 100%;


Neither worked but I dont really know what I am doing

teedoff
04-13-2011, 02:46 AM
You haven't posted your code you have so far. If you put the image as the background of the div, then the css would be:

background-image: url(images/someImage.jpg);
background-repeat: repeat-x;

TheCase
04-13-2011, 12:42 PM
Hi this is my current code



<link rel="stylesheet" href="style.css" type="text/css">
<img src="images/headerleft.gif" class="headerimage" /><img src="images/headerright.gif" class="headerimage" />

CSS


* {
margin:0;
padding:0;
}


Now the two images join perfectly and now they start at the top of the page but the right image I want stretched out to the entire width of the page, unsure how as it will vary depending on persons resolution or windows size i guess

coothead
04-13-2011, 01:22 PM
Hi there TheCase,

check out the attachment to see a possible solution. ;)

coothead

&#160;

coothead
04-13-2011, 01:46 PM
Hi there TheCase,

if you want the header to consist of two sections then use this code...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body{
padding:0;
margin:0;
}
#left {
float:left;
width:115px;
height:344px;
background-image:url(header-bg.jpg);
color:#fff;
text-align:center;
}
#right {
margin-left:115px;
height:344px;
background-image:url(header-bg.jpg);
background-position:-115px 0;
color:#fff;
text-align:center;
}
</style>

</head>
<body>

<div id="left">left</div>
<div id="right">right</div>

</body>
</html>

coothead

stevemack
04-13-2011, 02:16 PM
body{
padding:0;
margin:0;
}

Also set width to auto and you can do it by stretching background image.

TheCase
04-13-2011, 06:21 PM
Thanks all got it working now

coothead
04-13-2011, 06:30 PM
No problem, you're very welcome. ;)

Blogger
04-13-2011, 07:14 PM
To just let you know what he did:

By adding float: left; to your CSS, your images will align side by side - they are "floating" towards the left side. If you want them at the right side just change it to float: right;.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum