Question

I am working with a project and I have come across an obstacle and I cannot seem to fix this problem. (Haha, fix)

I have a page consistent of html, php’s <?php include=""; ?>, javascript (and jQuery) and of course, some CSS. The problem is the CSS.

The front page has one background picture and the subpages has another background picture.

The subpages’ picture should be positioned at “right top” and the front page picture should be positioned in a such way that the entire picture is shown.

It worked just fine when no background-attachment: was specified, but I have a subpage which has more text than the page can include. This, of course, makes the page scroll. I want the picture to not move (stay fixed), but when I add a “fixed” to my background: in the css, the picture goes nuts. This is the order, I put my stuff in background:

div#container {
    background: #ccffff url("billder/bckground.jpg") fixed no-repeat right top;
}

I thought that the problem would maybe be here, but I tried to seperate the tags, or whatever it’s called in css, like this:

background-color: #ccffff;
background-image: url("billeder/bckground.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right top;

Still not working (still going wild)

I build the page using this method to make a div have a min-height: in percentage. This is the main page of my project and this is the subpage with a lot of text. As you can see, the main page goes crazy and the subpage’s background picture is not properly shown, you cannot see the entire picture. The picture is fixed but not displayed the way I want it to.

I really hope you can help me, as I’ve put a lot of efford into this website.

Just to avoid any misunderstandings and annoying questions, I am not a very experienced programmer/web developer.

EDIT

To make things clear, what I want is for the background to stay fixed (scroll along with the page)

Answer 1

Remove fixed and set min-height (or height which I think looks better) to 750px on your <div id="container_front">...</div>.

So it becomes this in your css:

div#container {
    position:relative;
    margin:0 auto;
    width:900px;
    background-color: #ccffff;
    background-image: url("billeder/bckground.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    height: 750px;
    min-height: 750px;
}