no scroll background

  • jannin
  • Beginner
  • Beginner
  • User avatar
  • Posts: 40
  • Loc: Cranbrook, BC Canada

Post 3+ Months Ago

Okay, sorry about the unclear title...
I'd like to know how backgrounds are made so they don't scroll with the text on the page?

Probably another easy answer that I could figure out, but ever since I found this forum I've been becoming more and more dependent upon it...

Einh.
Thanks in advance!

/jannin
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

Code: [ Select ]
<style type="text/css">
body { background-image: url(background.gif); background-attachment: fixed; }
</style>
  1. <style type="text/css">
  2. body { background-image: url(background.gif); background-attachment: fixed; }
  3. </style>


The above assumes your background image is named background.gif
Could be any background image though.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

you could also use the shorthand version

Code: [ Select ]
<style type="text/css">
body { background: url(background.gif) fixed; }
</style>
  1. <style type="text/css">
  2. body { background: url(background.gif) fixed; }
  3. </style>


save a couple key strokes anyway ;)
  • Sonire
  • Novice
  • Novice
  • Sonire
  • Posts: 33

Post 3+ Months Ago

Not to mention.....

{body background img fixed src="location"}

Actually, I could be incorrect about this one. It's been a while since ive use an image for a background. I think that will work though. some one correct me if I'm wrong.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Sonire, what the heck is that?

HTML uses < and >
CSS uses { and }
  • jannin
  • Beginner
  • Beginner
  • User avatar
  • Posts: 40
  • Loc: Cranbrook, BC Canada

Post 3+ Months Ago

heh, thanks all,

actually I got impatient and figured that part out on my own :oops:
but now I'd like to know...
is there any way to use the codes you've given me, and change the size of the image so it's the same size as the screen (100%)?

Tried to find that out on my own, didn't work too well. x.x

Thanks again!
/jannin
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

CSS cannot be used to accomplish what you want, but other techniques can be used. Look at tedster's replies in this thread, and also look at the very last reply by starway...

http://www.webmasterworld.com/forum83/303.htm
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Nunzio390 wrote:
CSS cannot be used to accomplish what you want, but other techniques can be used. Look at tedster's replies in this thread, and also look at the very last reply by starway...

http://www.webmasterworld.com/forum83/303.htm


For proof that you can do this with CSS, look at http://www.gsv2.com/en/?p=gallery

The dj image on the bottom right is a fixed background.
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

Errrr... I don't see any indication on that Groove Seeker page where any background image has been resized to stretch to accommodate 100% of the width and height of a user's screen resolution. The Groove Seeker page you linked to above is however a perfect example of a fixed background in use, which is what jannin's first question in this thread was asking, and which I and others already responded to immediately after. I supplied the CSS to show how to do so and digitalMedia gave a shortened version. I am not disputing that a fixed background is possible. It most definitely is. When I answered jannin above (and where you quoted me), I answered in direct response to and immediately following jannin's 2nd question in this thread, quoted below and highlighted in italic bold...

jannin wrote:
heh, thanks all,

actually I got impatient and figured that part out on my own :oops:
but now I'd like to know...
is there any way to use the codes you've given me, and change the size of the image so it's the same size as the screen (100%)?

Tried to find that out on my own, didn't work too well. x.x

Thanks again!
/jannin
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

My bad, I thought we were still discussing the fixed background issue. Guess I should take my own advice and READ before posting. :)
  • jannin
  • Beginner
  • Beginner
  • User avatar
  • Posts: 40
  • Loc: Cranbrook, BC Canada

Post 3+ Months Ago

Slight problem, Nunzio390, I can't enter that thread, it's members only, and I'd have to pay to register.

Any other ideas?

/jannin
  • Nunzio390
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: Tharsis Ridge (Martian lowlands)

Post 3+ Months Ago

jannin....

Are you referring to this thread? ...
http://www.webmasterworld.com/forum83/303.htm

It's true that you can't reply to any thread there without first registering and then logging in. But you most certainly do not have to pay to register there. It's a forum, similar to here at Ozzu.

Go ahead and register there, if you'd also like to post there too...
http://www.webmasterworld.com/reg.cgi
  • Truce
  • Guru
  • Guru
  • Truce
  • Posts: 1477
  • Loc: Washington DC

Post 3+ Months Ago

You could also do a resolution check and then redirect to a separate page so it all fit correctly.

more on how to do this at <a href="http://www.dynamicdrive.com">Dynamic Drive</a>
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

have the image position absolute, in the top left corner, stretched 100% and then set the z-index so its behind everything!

Wil that work?

sorry - i was just leaving for work when I wrote that...
try:
PHP Code: [ Select ]
 
img#backgroundimage{
 
    position: fixed;
 
    left: 0px;
 
    top: 0px;
 
    width:100%;
 
    height:100%;
 
    z-index:0;
 
}
 
 
  1.  
  2. img#backgroundimage{
  3.  
  4.     position: fixed;
  5.  
  6.     left: 0px;
  7.  
  8.     top: 0px;
  9.  
  10.     width:100%;
  11.  
  12.     height:100%;
  13.  
  14.     z-index:0;
  15.  
  16. }
  17.  
  18.  

Then place the image you want for your background in an img with id="backgroundimage".

I don't know if that z index will work, you might need to set some other z-indeces on other elements. Have a go and see what happens, unless someone else has already tried this and it doesn't work lol.

If you are going to check for screen size, then don't do a redirect, just put something like this in your title tag:
PHP Code: [ Select ]
 
<style>
 
    body{
 
        background-image:url(default/image/path)
 
        background-position: center;
 
        background-attachment:fixed;
 
        background-repeat:none;
 
}
 
 
 
</style>
 
<script>
 
/*insert code here that will detect window size and select the most appropriate image for the background.  Store the image path in the imaginatively titled variable "ImagePath"*/
 
writeln('<style>body{background-image:url('+ImagePath+');background-position: 0px 0px;}</style>')
 
</script>
 
 
 
 
  1.  
  2. <style>
  3.  
  4.     body{
  5.  
  6.         background-image:url(default/image/path)
  7.  
  8.         background-position: center;
  9.  
  10.         background-attachment:fixed;
  11.  
  12.         background-repeat:none;
  13.  
  14. }
  15.  
  16.  
  17.  
  18. </style>
  19.  
  20. <script>
  21.  
  22. /*insert code here that will detect window size and select the most appropriate image for the background.  Store the image path in the imaginatively titled variable "ImagePath"*/
  23.  
  24. writeln('<style>body{background-image:url('+ImagePath+');background-position: 0px 0px;}</style>')
  25.  
  26. </script>
  27.  
  28.  
  29.  
  30.  

Saves you messing around with multiple pages and all that. It also gives you a handy alternative to those people who have javascript switched off.

BTW I have tested none of the code here so it will all need debugging....
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Ok, I have now tried the first one...

It works if:

a)everything else on your page has a higher z-index AND everything else on the page is absolutely positioned (Or you have to put the image as the first object in the body tag.

b) you are not using IE (IE can't cope with fixed position stuff too well, there may be a hack but I don't know it...)

So possibly best to ignore that one, The second one should still work...

//edit: in case you were wondering, the background-size property should be introduced for css3:
http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

CSS3 will be so much fun!


I did a fix for IE fixed position here: <a href="http://dev.jdenny.co.uk/css/ie_fixed.html">IE Fiexed!</a>
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Huh! Thats eric meyers complex spiral....
But it works in IE.
You so clever :)

Except it doesnt work when javascript is disabled... Not so clever as I thought. Well done though still. I'm just embarking on building a website looking at all sorts of stuff like this, with tutorials and suchlike. Would you mind if I included this, either as a tutorial, explanation or just a link to this page? I will give you full credit!

Hmmm css3 will be fun, but when will we reall get to use it - IE doesn't support css1 properly yet :lol:
  • jannin
  • Beginner
  • Beginner
  • User avatar
  • Posts: 40
  • Loc: Cranbrook, BC Canada

Post 3+ Months Ago

Wow, thanks a lot rtm223, I'll give all that a go in a bit, tell you how badly I screw it up :roll:

Thanks again,
and nice avatar there, by the way.
/jannin

Post Information

  • Total Posts in this topic: 18 posts
  • Users browsing this forum: No registered users and 40 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
 
cron
 

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