Background to stay fixed and not scroll

  • Wurn
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122
  • Loc: Cape Town

Post 3+ Months Ago

Hey guys

havent been here for awhile... anyhoo needs some advice please

http://www.gamespot.com/ - hope the bg is still displayed when anyone is reading my question.

How did they get the background to stay stationery and the middle table with the content in to scroll up and down but the background is not scrolling? Can i do this with html or must it be php?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23460
  • Loc: Woodbridge VA

Post 3+ Months Ago

http://www.brownielocks.com/fixedbackground.html

Works with most browsers.
  • chenguo
  • Newbie
  • Newbie
  • chenguo
  • Posts: 6

Post 3+ Months Ago

ATNO/TW wrote:
http://www.brownielocks.com/fixedbackground.html

Works with most browsers.


yap that is all you need...

but it is best if you can optimize it with seperate css style sheet, so it is more managable....
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

Wurn wrote:
Hey guys

havent been here for awhile... anyhoo needs some advice please

http://www.gamespot.com/ - hope the bg is still displayed when anyone is reading my question.

How did they get the background to stay stationery and the middle table with the content in to scroll up and down but the background is not scrolling? Can i do this with html or must it be php?


In the css...

Code: [ Select ]
body {
    background-image: url('image.JPG'):
    background-attachment: fixed;
}
  1. body {
  2.     background-image: url('image.JPG'):
  3.     background-attachment: fixed;
  4. }


...put that. The background-image is obviously the image file you want to put as a background and the background-attachment is put to fixed so it would not scroll.

Should work in every browser. Don't know about IE though. It plays so many things and their mostly random that I can't really promise you anything for IE.
  • Wurn
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122
  • Loc: Cape Town

Post 3+ Months Ago

First off, thank you guys for the reply and it works beautifully

Now one more thing i need please. I still need the BG to stay fixed when resizing the browser window. At the moment it is resizing with the browser.

Any suggestions pleaase!
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23460
  • Loc: Woodbridge VA

Post 3+ Months Ago

That won't be possible. Your background image is a fixed width and height. It stays the same size no matter what size the browser window. Which is the other thing to consider. You need to test your page with different resolutions. You might think it looks beautiful at 1024x768 but a person with a laptop at 1280x800 like I have may see something entirely different that you do. If you are going to use a fixed background you should consider using a generic pattern vs. a picture.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

Can't you set widths and heights? Using pixels rather than percentages? Just a thought. Never tried it because usually, when I try to put an image as a background, it comes out bad.
  • Wurn
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122
  • Loc: Cape Town

Post 3+ Months Ago

Now we are getting to the real problem at hand. That is why i tried to emulate what the guys did on the Gamespot website. It looks like they used div tag's for the bg and scrollable text area. I know they do use a generic pattern at something like 1px (height) X 800px (wide) or such and then make it 100% in the table and such.

Basically i would like to create the Gamespot effect they have going. Even with their grey background they still manage to resize the background and have the middle table with the text or main info keeping its size and moving with the background, no matter what resolution size you have on your pc or laptop. Here at work i view it at 1680x1050 and at home 1400x900 or 1152x768 and on all instances they look fine.

So please if anyone can help me here with getting the same effect as gamespot.
  • Wurn
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122
  • Loc: Cape Town

Post 3+ Months Ago

I found another site that does the same thing as gamespot.com

http://www.incredible.co.za

in the above site they split the images on the sides in two parts. please anyone this must be easy to do?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

Code: [ Select ]
body
{
background-image: url(../images/mainbg_tile.jpg);
background-repeat: repeat-x;
background-x-position: center;
background-y-position: top;
background-attachment: fixed;
background-color: #cccccc;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
  1. body
  2. {
  3. background-image: url(../images/mainbg_tile.jpg);
  4. background-repeat: repeat-x;
  5. background-x-position: center;
  6. background-y-position: top;
  7. background-attachment: fixed;
  8. background-color: #cccccc;
  9. margin-top: 0px;
  10. margin-right: 0px;
  11. margin-bottom: 0px;
  12. margin-left: 0px;
  13. }

here's where they do that ... I think this should work for you aswell ... and by the way ... Incredible connection sucks big time ... They're way expensive ...
  • davidll
  • Born
  • Born
  • davidll
  • Posts: 2

Post 41 days ago

Hey everyone.

These html codes do not work at all for me. I am making a simple page for a client, background fixed, and have put every kind of code known to web developers everywhere and nothing will hold that background static. The code I most recently used is:

<body background="site_address/images/misty-morning-flight_bg.png" link="#C0C0C0" onload="dynAnimation()" bgproperties="fixed" ;background-attachment:fixed;background-attachment:fixed;">

In preview in front page, it holds static, but when i put it on the server, it scrolls.

Any advice?
  • davidll
  • Born
  • Born
  • davidll
  • Posts: 2

Post 40 days ago

Oh, I might mention too, that Internet explorer handles the static background on this page ok, it is Firefox which is not behaving.

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 26 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.