CSS background scrolling problem

**Unmaker** · 07:12 PM

I've been having trouble with my background-attachment property. I put scroll in for my value but when I open the page in Firefox or IE the background remains stationary and I get gray space beneath my background image. I also tried using the HTML Body tag equivalent bgproperties but I didn't have any luck with that either. Does anybody no what the problem is and how I can fix it? It's .php file and I set up a picture gallery so their is a image size variable could not having a defined image size be my problem?

**chrishirst** · 03-07-2007, 03:19 AM

Do we get to see code or a url ?? because it is easy to diagnose when you can see the problem.

there is no need to use background-attachment:scroll because that is the default

and there is a CSS forum.

**Unmaker** · 03-07-2007, 02:59 PM

I didn't see a CSS forum so I'm sorry. And I also would like to add that there is no reason to be rude, all you have to do is ask.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>4|\|1|\/|3 &reg;&micro;&pound;35! 17 5&pound;4&yen;Z!</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
    <img src="Animeclubheader.png" alt="4|\|1|\/|&euro; &copy;&pound;&micro;&szlig; 15 L337!" width="413" height="96" /><br />
    <img src="Subheader.png" alt="We Love Anime!" />
</center>

<center>
<?php
        $maximages = 5;
        $imagenum = ($_GET['imagenum']<=0||$_GET['imagenum']>$maximages)?$maximages:$_GET['imagenum'];
        echo sprintf("<img src=\"Comic%d.png\" name=\"comic\" /><br />",$imagenum);
        echo sprintf("<a href=\"index.php?imagenum=%d\"><img border=\"0\" src=\"back.png\" alt=\"Previous Comic\" align=\"left\" />
            </a>",(($imagenum-1>0)?($imagenum-1):($imagenum)));
        echo sprintf("<a href=\"index.php?imagenum=%d\"><img border=\"0\" src=\"next.png\" align=\"right\" alt=\"Next Comic\" />
            </a>",(($imagenum+1<=$maximages)?($imagenum+1):($imagenum)));
    ?>
</center> 
<center>
<br />
    <form action="index.php" method="get">
        <b><font color="#FF9900">Input Comic Number:</font></b><input type="text" name="imagenum" />
    </form>
</center>
</body>
</html>

Code:

body{
    background-attachment:scroll;
    background-image:url(GradientBack.png);
    background:scroll, url(GradientBack.png);
}

I can't give you a url because my server isn't connected to the internet yet, there is a router problem that requires me to hook up a second computer in the basement. And if its the default, there has to be a problem with my computer because the background remains stationary no matter what I do.

**chrishirst** · 03-07-2007, 04:35 PM

no rudeness intended, just brief and to the point.

1/ Is that page part of a frameset? in not, you are using the wrong DTD

2/ The image is a .png and has alpha transparency (at a guess). The grey is because IE upto ver 6 doesn't render transparency in png images at all.

There is a fix at http://homepage.ntlworld.com/bobosola/ but that does not work for background images.

reduce your body definition to the middle line only
the syntax of the bottom line is incorrect as multiple CSS properties are space delimited NOT comma delimited.

**Unmaker** · 03:00 PM

One question thats gonna make me sound stupid. DTD? I'm not using a frameset and There is no transparency in my Picture its a solid gradient. I tried using it as a .jpg it didnt make any difference. Also, I use firefox.

**Unmaker** · 03:24 PM

Wait I think I see what your taking about DOCTYPE right? It says frameset in it. I'll fix that now. And If it helps:
http://i43.photobucket.com/albums/e3...adientBack.png
http://i43.photobucket.com/albums/e3...adientBack.jpg
http://i43.photobucket.com/albums/e3...adientBack.gif
They are all the same image just different file types. Dimensions are 15x768. I've tried using all 3 of them and I get the same results.
Picture of my site and where the problem is at:
http://i43.photobucket.com/albums/e3...pageissues.jpg

**chrishirst** · 03-08-2007, 03:26 PM

Yep the doctype (DTD is the acronym for Document Type Declaration )

Ideally somehow we need to see the rendered page c/w images rather than a chunk of php code.

Just another thought, How big is your background-image? does it fill the browser viewport?

**Unmaker** · 03-08-2007, 05:09 PM

I designed the height for my screen resolution which 1024x768 so it fills the more than the whole window because I didn't subtract the the the toolbars and start menu bar. But I have come up with a solution, i'll have to change the picture but its fairly simple, double the canvas size copy the gradient and flip it vertically, it wont have to scroll because it will look uniform when it repeats. But if you can think of a way to get the scroll background working that would be great. I'll ask my web design teacher maybe she'll have an answer.

**chrishirst** · 03:33 AM

If the image is bigger than the viewport at 1024x768 and your content is longer than the viewport surely you would be trying to achieve a fixed background layout, so that it always remains in the browser viewport no matter where the body content is scrolled to. A scrolling background would stay behind the initial visible content when the body content scrolled up or down, so your body content was 2 (or more) viewports in length your, background would disappear out of view when scrolled upwards and reappear when scrolled back down.

The viewport of a browser BTW, is the visible area between the bottom of the header including toolbars, and the top of the status bar. It is related to, but not the same size as the screen resolution.

**Unmaker** · 02:54 PM

I know and I usually open up a print screen of a browser window and cut away the toolbars and start menu bar and use the dimensions of whats left, but would that fix my problem? Dreamweaver also offers window dimensions for set screen resolutions but when you open the drop down menu the options are grayed and you cant select them. Do you know away around that? (Are you the only person on this forum? lol)

**LadynRed** · 03-09-2007, 02:57 PM

You might want to grab this handy grid:
http://www.wpdfd.com/browsergrid.htm

**Unmaker** · 03-09-2007, 03:41 PM

That grid might be good for other browsers with different setting but that made my background image smaller than my window... I have set up a redirection page for several of my webpages for different screen resolutions but I cant account for the amount of menus and their sizes with it. I'm pretty sure its impossible. Their might be a way to set up a redirect for different browsers though but whatever it is I don't know it.

**chrishirst** · 03-09-2007, 07:51 PM

You see, the problem is you are just considering one user. YOU

Quote:

I have set up a redirection page for several of my webpages for different screen resolutions

and what do you do about visitors who do not have their browser running at full screen ?

The job of a designer is to make the pages suit any visitor and be usable and accessible by all users. Users are a little more savvy than they used to be and the
"This page best viewed in [insert browser] at [insert resolution] "
just looks less professional than ever.
Redirecting to a different page to match resolutions and/or browsers is another poor idea, it means far more work and far more pages to maintain.
Even with only 2 pages in the site it means you have a possible total 42 pages to create and update ( 3 common resolutions and minimum of 7 browsers in general use)

How would you explain to a client who is paying for your time that their 10 page website will have to have over 200 pages and will actually cost £3,000 (~$6000)

NOW is the time to learn how to make pages correctly, before you get stuck into some bad habits of trying to make the user fit your pages rather than the other way around.