Span/stretch Background Image to Screen

[Sam324]

How do I make my background image stretch to fit the screen, imstead of just tiling? I've looked all over for this, but can't find it.

[WebJoel]

http://www.cssplay.co.uk/layouts/background.html

[Sam324]

Ok, what exactly is it that makes the image stretch? I looked in the source code and found width:100% and overflow:hidden. I put this in my CSS, because I wanted it to still scroll vertically, but it still tiled.

[WebJoel]

Did you do this? (screenshot)

[Sam324]

Yeah, I tried putting width: 100%, height: 100%, and overflow: hidden in the BODY part of the style sheet, and width: 100% and overflow: hidden in the #Background part. It still tiles veritcally and horizontally. I'm using a linked style sheet.

BODY {font-family: Segoe Script, Script; font-size: .5cm; color: #663300; margin: 1in; padding:0; width: 100%; height: 100%; overflow: hidden; background-image: url(bkgd_parchment_starfield.jpeg)}
#Background {width: 100% overflow: hidden}
A:Link {color: black, text-decoration: none}

[WebJoel]

You are going to have to post more than just three lines of your CSS to get any real help. :o This reveals nearly nothing useful...

[Sam324]

Well, that's my entire style sheet. If you want the actual page, you can look at it and view the source code at http://samkorson.htmlplanet.com/Oblivion/ and go to the "Files" sub-directory to see more.

[WebJoel]

And what your stylesheet did not reveal but your HTML code does, as seen in Firefox, Mozilla, Konqueror, Safari, etc etc, is that there are NO scrollbars and thus, alot of your page is in-accessible. -I can't scroll to view, it is denied to me. :(

see screenshot image

[ray326]

Yeah, it's probably not a good idea to put overflow:hidden on the body.

[Sam324]

Sorry this took so long. I, for some reason, stopped recieving emails from this forum. I took out all instances of overflow:hidden. What do I do to make it scroll only vertically?

[WebJoel]

Sorry this took so long. I, for some reason, stopped recieving emails from this forum. I took out all instances of overflow:hidden. What do I do to make it scroll only vertically?
oveflow-y:auto; on the main container (div, or whatever) with a specified height, will create VERTICAL-only scrollbars IF the content exceeds the stated height of the container.

overflow-y:scroll; on the main container (div, or whatever) with a specified height, will create VERTICAL-only scrollbars whether they are needed or not.

Height must be specified, else the container might incorrectly expand vertically to accomodate more text/content.

Both overflow-y:value; shown above will not show the horizontal ("x" axis) scrollbar due to explicitly stating only the -y axis.
Only "oveflow:auto;" or "overflow:scroll;" will do that.

[Sam324]

Ok, but my backrgound still isn't stretching to fit the page width. How do I accomplish this?

[Centauri]

A background image CANNOT be made to appear anything other than full size. If you had read the code properly for the page Webjoel linked to, you would find the "background" image is not a background at all, but an <img> tag positioned absolutely on the page, set at 100% height and width - and yes, the page needs to be locked to this size. The rest of the site is then positioned over top of this in another absolutely positioned div that has the scrollbars. The image will then LOOK like a background that is always 100% of the screen, but it will be "fixed" in that it cannot scoll with overflow of contents, which is probably not what you want by the look of your graphic.

[WebJoel]

Why as I seeing this (see screenshot image: attached) on Firefox at the URL your provided, but another image when I use IE?...:confused::confused::confused:

[Sam324]

Hmm...that's weird. I don't see what could be causing it as the background image I used is right here on the site. And it's even weirder that it only happens on one browser...

[Sam324]

Ok. Does this mean I need a div called "Background?" How do I give it this title?

[Centauri]

What you will need is a div containing the image which is stretched to 100% width, and then a wrapper div which surrounds the entire rest of the site positioned absolutely on top of the image. Html :<div id="background"><img src="Files/bkgd_parchment_starfield.jpeg"></div>
<div id="wrapper">
.
.
rest of site
.
.
</div>css: body {font-family: "Segoe Script", Script; font-size: 1.2em; color: #663300; padding:0; margin:0; width: 100%}
#background img {width: 100%}
#wrapper {position: absolute; top: 20px; left: 0; width: 100%}

[Sam324]

http://img86.imageshack.us/img86/2306/oblivionsiteln2.th.png (http://img86.imageshack.us/my.php?image=oblivionsiteln2.png)
Here's what is happening now, but I want the text to be over the paper, and the paper to fill the whole width of the screen.

[Centauri]

For this to work, the #background and Wrapper divs need to be the FIRST thing on the page, before all the code for the advertising banners - the #wrapper div must enclose ALL of the site, including the ads.

You also have a captal "B" for background in the css - it should be lower case (#background img {width: 100%})

[Sam324]

Uh-oh, because the ads are added automatically.

[Centauri]

Whilst the background div could also be positioned absolutely to try and cover the ads, they still push the page too wide, and the right ads column is still on top. If the ads are added by the host, then you need to find another host that does not do this.

[JanglyMark]

I have what I think is a similar problem.

I have started filling out my pages, and have hit a snag....

I have a stretched background (100% by 100%), over the top of this, I have links on the left hand side, and text as the main part of the page.

When I scroll down, the background and the links are static...just what I want. That is using IE6. When I tried it out in Firefox, the text was invisible, and scrolling down moved the links at the side.

Can anyone help? Code is here.....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jm2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">

<style type="text/css">
html {
height:100%;
}
body {
height:100%;
margin:0;
padding:0;
}
#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
padding-top: 70px;
padding-bottom: 0px;
padding-left: 8em;
padding-right: 0px;
}

</style>
<!--[if IE 6]>
<style type="text/css">
html {
overflow-y:hidden;
}
body {
overflow-y:auto;
}
#bg {
position:absolute;
z-index:-1;
}

</style>
<![endif]-->
</head>

<body>
<div id="bg"><img src="http://maclark.co.uk/janglymark/politics.jpg" width="100%" height="100%" alt=""></div>
<div id="content">
<p style="font-size:xx-large;">Boris & the RISE festival</p>

<p>London mayor, Boris Johnson has given the go-ahead for Europe's biggest annual anti-racism festival, RISE, but, with the proviso that the tagline, LONDON UNITED AGAINST RACISM be dropped.</p>
<p>This comes after BNP councillor, Richard Barnbrook complained to Boris about the nature of the festival. You may draw conclusions about the type of company that has Boris's ear at this point.</p>
<p>There is, however, a bigger picture. Firstly, many bands and artists have previously given their time and effort, if not for free, for a much reduced rate due to the nature of the event. How many will continue to do so now? It is enirely feasable that some bands or artists could simply pull out now that the festival is essentially stripped of it's core message.</p>
<p>This, at a time when the anti-racist & anti fascist message needs to be heard more than ever. I joined what was then the Anti Nazi League (and is now part of UAF (Unite Against Fascism)) in 1994, following the election of a BNP councillor to the Tower Hamlets ward in London, something that even then Tory Prime Minister John Major spoke out againt. I have been involved ever since, although sometimes not as active as I'd like to be. The ANL carnival - attended by over 100,000 - in the mid 90's was one of the best - and most positive days out I have had - it seemed that a real, tangeable change had been made.</p>
<p>Today, the picture is less rosy. The BNP have a handfull of councillors up and down the country, I have heard people openly support them - albeit a tiny minority. I hear casual racism in polite conversation - comments that simply would not have been made a mere five years ago.</p>
<p>The need to rail against this is ever greater. As a proud member of UAF, I believe that their methods - whether leafleting door to door at election time, marching, organising gigs, can be - and are effective...but, sometimes not effective enough - and I say that with a heavy heart.</p>
<p>It is not all gloom and doom. The recent Love Music Hate Racism carnival in London, again pulled in over 100,000 people, many of them young people - many of which may have had their first brush with politics, more specifically anti-racism & anti fascism. We are also, despite attempts by some politicians, and the headlines screaming from the likes of The Daily Express, in a huge majority. That said, there is no room for complacency.</p>
<p>As far as the RISE festival goes, I hope that all the bands that are due to play do so, and that the anti-racist message is shouted loud and clear by the bands themselves from the stage...even if it's not officially an anti-racist event anymore, there is nothing to stop the bands making it so.</p>
<p></p>
<p>====================================================================================</p>
<p></p>
<p>This blog will change in the next 7-10 days, but, all blogs will be archived. A link will appear for older blogs once the second one has been posted</p>
</div>

<div id='ldhePicture2' name='ldhePicture2' style='position:absolute;left:10px;top:10px;width:120px;height:100px;' align='left' valign='top'>
<a href="http://maclark.co.uk/janglymark/mainmenu.htm">
<img id='Picture2' name='Picture2' src='http://maclark.co.uk/janglymark/janglyclear_27631.gif' border='0' width='120' height='100'></img></a></div>

<div id='stopwar' name='stopwar' style='position:absolute;left:35px;top:180px;width:70px;height:70px;' align='left' valign='top'>
<a href="http://www.stopwar.org.uk/">
<img id='Picture2' name='Picture2' src='http://maclark.co.uk/janglymark/stopwar.jpg' border='0' width='70' height='70'></img></a></div>

<div id='uaf' name='uaf' style='position:absolute;left:35px;top:270px;width:70px;height:70px;' align='left' valign='top'>
<a href="http://www.uaf.org.uk/">
<img id='uaf' name='uaf' src='http://maclark.co.uk/janglymark/uaf.jpg' border='0' width='70' height='70'></img></a></div>

<div id='antiwar' name='antiwar' style='position:absolute;left:35px;top:360px;width:70px;height:70px;' align='left' valign='top'>
<a href="http://antiwar.com/">
<img id='uaf' name='uaf' src='http://maclark.co.uk/janglymark/antiwar.jpg' border='0' width='70' height='70'></img></a></div>

<div id='no2id' name='no2id' style='position:absolute;left:35px;top:450px;width:70px;height:70px;' align='left' valign='top'>
<a href="http://www.no2id.net/">
<img id='uaf' name='uaf' src='http://maclark.co.uk/janglymark/no2id.jpg' border='0' width='70' height='70'></img></a></div>
</body>
</html>