I'm not very CSS smart, and have been using various help pages for coding. I am trying on my page to have a BG that is fixed but stretched when you scroll. It previews fine in IE, scrolls wonderful and looks the way I want it, image size is great, but in Firefox it only shows the top inch of the BG then the rest of the page is white.
div style="background:url(images/Blue%20BG.jpg) repeat fixed;
width:1280px;
height:100px;"
style type="text/css"
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
/style
is what I have, is something cancelling out the BG in FF?
CSS Coding Help
Mon, 27/09/2010 - 12:59pm
#1
CSS Coding Help
Mon, 27/09/2010 - 7:35pm
#2
If I understand right, you want some background image to stretch the full view of the browser window, whilst the contents of the page scroll along, and not the background image?
Internet Explorer is a very buggy browser. I created a very basic test page with the following code:
[color=red]< html>[/color]
[color=blue]< head>[/color]
[color=green]< title>[/color]This is a test page![color=green]< /title>[/color]
[b]< style>[/b]
html, body {[color=orange]height[/color]: 100%; [color=orange]margin[/color]: 0;[color=orange]padding[/color]: 0;}
img#bg {[color=orange]position[/color]:fixed; [color=orange]top[/color]:0; [color=orange]left[/color]:0; [color=orange]width[/color]:100%; [color=orange]height[/color]:100%;}
#content {[color=orange]position[/color]:relative; [color=orange]z-index[/color]:1;}
[b]< /style>[/b]
[color=blue]< /head>[/color]
[color=purple]< body>[/color]
< img src="BlueBG.jpg" alt="background image" id="bg" />
< div id="content">All of your pages content, HTML and etc goes here
< /div>
[color=purple]< /body>[/color]
[color=red]< /html>[/color]
excuse the spaces between the < and the actual html tag, I could not get the code function on here to work.
Anyways, that code functions in Chrome and FF, but does [b]not[/b] function properly in IE. There currently is no true background image stretch methods, at least, not until current browsers start supporting the CSS3 property 'background-size'
I am not sure where you are trying to apply this to (aka a regular page or a Neopets Petpage).
This method I posted does work with petpages, however there are several issues:
1. This causes the background image to cover EVERYTHING that is NOT in the 'content' division... Meaning, when you preview the changes to your page, you will not see the 'Save Changes' or 'Go Back' buttons, meaning, you wont be able to save the page... without some addon such as firebug for firefox to manipulate the page in live mode.
2. This causes the background image to cover the Neopets copyright and etc crap they make you have on both the bottom of the page and the very top of the page, so you will have to duplicate it. I am not 100% sure if duplicating it will satisfy TNT...
Tue, 28/09/2010 - 7:21pm
#3
What I truly want is an image I have that will stay in one place, but cover the whole page no matter what size screen the viewer is using, and don't want the BG to repeat since it would look funny, but have the text scroll and the image stay in the same place.
I can add it to a petpage to see what happens , but have the info stored on my work computer so will have to try tomorrow
