View Full Version : Two header images
04-13-2011, 01:19 AM
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.
04-13-2011, 01: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.
04-13-2011, 01:38 AM
To bring the images closer to the page add
Worked really good, but to make the image 2 fill all the width of page im stuck with I tried
Neither worked but I dont really know what I am doing
04-13-2011, 01: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:
04-13-2011, 11:42 AM
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" />
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
04-13-2011, 12:22 PM
Hi there TheCase,
check out the attachment to see a possible solution. ;)
04-13-2011, 12: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"
<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">
04-13-2011, 01:16 PM
Also set width to auto and you can do it by stretching background image.
04-13-2011, 05:21 PM
Thanks all got it working now
04-13-2011, 05:30 PM
No problem, you're very welcome. ;)
04-13-2011, 06: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;.
Powered by vBulletin® Version 4.2.2 Copyright © 2015 vBulletin Solutions, Inc. All rights reserved.