Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firefox CSS problem (aligning background to div)

    Hi,

    I am trying to add a background image to a div.

    Internet Explorer does display the background correctly, but Firefox aligns the background not to the div, but to the browser screen. Does anyone know what I am doing wrong?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
    <head>
    <link title="stylesheet" href="style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
    <div class="content"></div>
    </body>
    </html>
    And here is the relevant CSS code:

    Code:
    .content {
    	position: absolute;
    	top: 20px;
    	left: 20px;
    	background-image: url(images/zonnebloeml.jpg);
    	background-attachment: fixed;
    	background-position: bottom left;
    	background-repeat: no-repeat;
    	width:515px;
    	height:500px;
    	border: 1px solid black;
    	overflow: auto;
    }
    I hope someone here knows how to fix it!
    TIA

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there Yoast,

    and a warm welcome to these forums.

    try it like this...
    Code:
    .content {
    	position: absolute;
    	top: 20px;
    	left: 20px;
    	background-image: url(images/zonnebloeml.jpg);
    	background-attachment:scroll !important;
    	background-attachment: fixed;
    	background-position:bottom left ;
    	background-repeat: no-repeat;
    	width:515px;
    	height:500px;
    	border: 1px solid black;
    	overflow: auto;
    }
    coothead

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, That did it!

    Thanks a lot. But... What is it doing actually?

    It looks like a hack... Can you enlighten me?

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there Yoast,

    I suppose it is a hack....an IE hack.

    It would work OK in Firefox, Opera and Mozilla like this...
    Code:
    .content {
    	position: absolute;
    	top: 20px;
    	left: 20px;
    	background-image: url(images/zonnebloeml.jpg);
    	background-position:bottom left ;
    	background-repeat: no-repeat;
    	width:515px;
    	height:500px;
    	border: 1px solid black;
    	overflow: auto;
    }
    But as IE requires...

    background-attachment: fixed;

    ...Firefox etc. requires this...

    background-attachment:scroll !important;

    coothead

  • #5
    New to the CF scene
    Join Date
    May 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, now I understand.
    I already noticed that Firefox did not need the background-attachment.

    I love MSIE. It makes life so much more interesting. All would be too damn straightforward otherwise (and possibly this forum would not exist ;-) ).

    Thanks again.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •