Stretch background image in header only horizontally, it does not break in IE7

Hi all, I have an abstract background in my header that I want to stretch horizontally 100% in any sized view-port, while always retaining a height of 100px, is that possible with css that does not break in IE7, or do I have to resort to javascript:nono:.

Have you tried to do this? What was the result? Do you have a link that we can have so we can see the current site? The answer is that it’s most likely doable in IE7, but we will need to see the link (or at the very least, code to replicate. Not preferable because we can’t see the images then) of the live page :). From what you want it sounds pretty straight forward.

Hi Ryan,

Presently whenever I resize the view-port, the header’s background image sizes vertically and horizontally, as mentioned in my question, I would like to just stretch the abstract horizontally, I would prefer to not use a link but I would like to turn folks onto a great program I found while creating the abstract and anyone who wants to mimic my process can give it a go, you will need java running, I simply imported the image into Photoshop and set the image height to 100px, if you want to play with online version of this cool software, go here, http://www.escapemotions.com/experiments/flame/#top, he does have a paid version, looks pretty cool…

This is the code, if I have some irrelevant code, be aware, I am quite the amateur…


<!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>
<title>2 Column Liquid Fixed CSS Layout</title>
<style type='text/css'>
html, body {
	background-image: url('images/bgb.jpg');
	background-repeat: no-repeat;
	background: bottom;
	height: 100%;
	background-size: 90%;
}
.header, .footer {
	position:fixed;
	width:100%;
	left:0;
	top:0;
}
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
   padding: 0px;
   margin: 0px;
}

.wrapper{
   width: 98%;
   margin: 0 auto;
}
.header{
	background-position: top;
	height: 98px;
	float: left;
	width: 100%;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black; /* For IE 8 */;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */;
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
	z-index: 999;
	background-image: url('images/Flame.jpg');
	background-repeat: no-repeat;
	background-size: cover;
}
.luminouspiritlogo {
	padding-left:20px;
	
}
.footer {
	background-position: bottom;
	bottom: 0;
	top: auto;
	height: 46px;
	font-family: Arial, Helvetica, sans-serif;
	color: #99CCFF;
	font-size: 10px;
	clear: both;
	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0px -8px 6px -6px #000; /* For IE 8 */;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=0, Color='#000000')"; /* For IE 5.5 - 7 */;
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=0, Color='#000000');
	z-index: 999;
	background-image: url('images/footer.jpg');
	background-repeat: repeat-x;
}

.wrapleft{
   float: left;
   width: 100%;
  
}
.left{
   margin-right: 210px;
   margin-top: 100px;
}
.right{
	position:fixed;
	top:100px;
   right: 1%;
   width: 180px;
   margin-left: -181px;
   background-color: #ABA5F2;
   z-index:998;
   padding:10px;
   min-height:100%;
}
.footer{
   float: left;
   width: 100%;
}
.style1 {
	text-align: left;
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="header">
    <div class="logo"><img src="images/logo.png" /></div>
    </div>
     <div class="right">
            right fixed
    </div> 
    <div class="wrapleft">
        <div class="left">
            
        	<table cellpadding="0" cellspacing="0.5%" style="width: 100%; height: 100px">
				<tr>
					<td style="width:180px" class="style1" valign="top">&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				</table>
            
        </div>
    </div>
   
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>


Hi,

You are using background-size which is only supported in ie9+ + other modern browsers.

It seems you can do what you need with background-size.


	background-size:100% 100px;


If you wanted to support IE8 and under then you’d have to use a foreground image instead and set its width to 100% and its height to 100px.

Usually stretching an image in one direction only has a detrimental effect but depends on the type of image

Hi Paul, thanks for getting back to me, a question, the reason I wanted to use a background image was because I also wanted to layer on top, both a .png logo and to the right, navigation, in my limited experience with css, normally to do what I want, I would have to work with a background image and as I just described, layer on top additional elements. With your solution, is it also possible to layer a logo and navigation, (being IE7 compatible)?

Hi,

You can absolutely place an image to cover your div and set its z-index to zero(z-index:0). Then make sure your content is in a div that is position:relative and has a z-index of 1 and it will sit on top.

(The parent of both divs must be position:relative for the absolute element to base its position on.)

Thanks Paul, I was thinking in that direction, I was not sure of the subtleties, thanks for pointing me in the right direction.

Hi Paul, I feel I have done as you suggested and indeed, the layered image and text floated right appear to be behaving in most browsers, I am running IE7 in a virtual machine and while the absolutely positioned z-index:1; graphic does position as expected, when I load the page in IE7 the text floated right does not appear at all, while in all other tested browsers my markup seems to be behaving properly, could someone look at what I did and either confirm that IE7 should work, or suggest a solution, pls see the code starting with the header div, (it could just be a quirk with the vm IE7).


<div class="header"><img src="images/flameheader.png" style="width:100%; height:100px; z-index:0; position:absolute" />
    <div style="padding-left:30px; z-index:1; position:relative"><img src="images/logo.png" /><div class="test" style="float:right; padding-top:70px; padding-right:30px; z-index:2; position:relative; color: #FFFFFF;">abcdefghigh</div> </div>
	</div>   </div>


Move the absolute element to just before the parents closing div and also add clear:both to it (although that is nonsense but cures an IE bug).


<div class="header">
		<div style="padding-left:30px; z-index:1; position:relative"><img src="images/logo.png" />
				<div class="test" style="float:right; padding-top:70px; padding-right:30px; z-index:2; position:relative; color: #FFFFFF;">abcdefghigh</div>
		</div>
		<img src="images/flameheader.png" style="width:100%; height:100px; z-index:0; position:absolute" />
</div>


You also seemed to have one too many closing divs in your code which I have removed.