Hi,
What I'd like to do is have a single background image, which would be 110px high and extend to the edges of the browser window which would replace the block of black that I currently have in the header below. I'd still like the text to appear above it.
Is there any way that this image could be fluid, i.e. shrink in scale with the rest of the page when I reduce the browser window.
CSS:
#header{
color: #FFFFFF;
margin: 0;
padding: 5px 0 0 0;
height: 110px;
}
HTML:
<div id="header">
<h1>joewalkden.co.uk</h1>
<h2>has been watching the skies</h2>
</div>
thanks!hmm i dont think it can using this method, unless you use javascript, otherwise a swf..actually try giving it a width of 100%, this will distort the image though.The normal strategy is to design a banner image that can be split, typically using the background for the left part and overlaying that with a foreground image floated right in the banner div.
What I'd like to do is have a single background image, which would be 110px high and extend to the edges of the browser window which would replace the block of black that I currently have in the header below. I'd still like the text to appear above it.
Is there any way that this image could be fluid, i.e. shrink in scale with the rest of the page when I reduce the browser window.
CSS:
#header{
color: #FFFFFF;
margin: 0;
padding: 5px 0 0 0;
height: 110px;
}
HTML:
<div id="header">
<h1>joewalkden.co.uk</h1>
<h2>has been watching the skies</h2>
</div>
thanks!hmm i dont think it can using this method, unless you use javascript, otherwise a swf..actually try giving it a width of 100%, this will distort the image though.The normal strategy is to design a banner image that can be split, typically using the background for the left part and overlaying that with a foreground image floated right in the banner div.