login  Naam:   Wachtwoord: 
Registreer je!
 Forum

achtergrond niet mee laten scrollen

Offline UpLink - 17/07/2010 23:16 (laatste wijziging 17/07/2010 23:16)
Avatar van UpLink... Beste SiMa's,

Ik zit met een kleine vraag... Eigenlijk 2 vraagjes...

Ik heb een afbeelding als achtergrond.
Nu wil ik dat die lijft staan als je scrolt, maar dat wil die niet doen.

Ik heb volgende code in mijn CSS voor de achtergrond:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. background: #000000 url(bg.gif) top no-repeat fixed;


Wat kan ik doen om de achtergrond tijdens het scrollen te laten staan?

En dan als 2de vraag...

Hoe kan ik mijn afbeelding mee laten stretchen naar gelang de resolutie?

Bij de meeste mensen die ik ken staat de resolutie op 1024x768 en dan komt die afbeelding mooi volledig over de gehele achtergrond...

Maar mijn resolutie staat wat hoger... namelijk op 1280x960 en daar word de achtergrond niet over heel mijn beeld weergegeven...
Hoe kan ik dat fixen?

9 antwoorden

Gesponsorde links
Offline valles10 - 18/07/2010 00:54
Avatar van valles10 HTML interesse
css code - Bekijk de code zonder highlighting - Klap code in 
  1. background: #000000 url(bg.gif) top no-repeat fixed;

dit stukje zou moeten kloppen, vandaag gebruikte ik net hetzelfde stukje code en werkte perfect. Op uitzondering dan dat w3c css validatie een nota gaf dat er te veel waardes op die lijn stonden. Jij kan dit ook is proberen dus:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body{
  2. background-color: #000;
  3. background-image: url('bg.gif');
  4. background-position: top;
  5. background-repeat: no-repeat;
  6. background-attachment: fixed;
  7. }

dat zal wss je probleem NIET oplossen, maar hou er wel rekening mee dat die attachment bijna alleen op body tag kan toegepast worden en NIET in een gewone div die meescrolt met je page.

Voor je tweede vraag is javascript een oplossing. Met javascript de resolutie van de bezoeker opvragen, en vervolgens de juiste achtergrond laden in je css. Omdat je waarschijnlijk straks toch om hulp zal vragen daarbij, of een voorbeeld:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2. var x = screen.width;
  3. var y = screen.height;
  4. if(x == 800 && y == 600){
  5. document.body.background = "lowres.jpg"
  6. }else if(x == BREEDTE && y == HOOGTE){
  7. document.body.background = "BESTANDSNAAM.gif"
  8. }else{
  9. //standaard afbeelding
  10. document.body.background = "bg.gif"
  11. }
  12. </script>

else if(x == BREEDTE && y == HOOGTE){
document.body.background = "BESTANDSNAAM.gif"
} voor elke resolutie die je wil. Je hebt dan wel voor elke resolutie een afbeelding nodig.
Offline WouterJ - 18/07/2010 11:50 (laatste wijziging 18/07/2010 11:52)
Avatar van WouterJ HTML gevorderde
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. else if(x == BREEDTE && y == HOOGTE){
  2. document.body.background = "BESTANDSNAAM.gif"
  3. }


Dit is onnodig gebruik van else. En je moet bij de script tag altijd type="text/javascript" neerzetten. En je bent een paar keer ; vergeten. De betere versie is dus:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. var x = screen.width;
  3. var y = screen.height;
  4. if (x == 800 && y == 600) {
  5. document.body.background = "lowres.jpg";
  6. }
  7. if (..............
Offline valles10 - 18/07/2010 16:49
Avatar van valles10 HTML interesse
Waldio schreef:
[..code..]

Dit is onnodig gebruik van else. En je moet bij de script tag altijd type="text/javascript" neerzetten. En je bent een paar keer ; vergeten. De betere versie is dus:
[..code..]

alles wat je zegt is ONWAAR. type="text/javascript" is niet verplicht, het werkt perfect zonder.
in javascript hoef je ';' niet te zetten, dat is alleen bij php. Men zet ';' voor de orde van het document.

en wat is er verkeerd met een else if() :S je maakt een vergelijking.. nu ja in dit geval KAN je altijd if zetten, maar het is zeker geen grote fout.
Offline Martijn - 18/07/2010 16:56
Avatar van Martijn Crew PHP als je uitrekken niet erg vind, kun je een div in je body plaatsen die 100% is met 0 margin en overflow auto, daarin een img in zetten die 100% width is (height gaat dan in proportie mee) en daarna je site. Als js je div streuctuur zo maakt:

<div met img></div>
<div container>
rest van site
</div>
moet dat gaan. Zoiets gebruik ik ook voor als ik 2 backgrounds moet repeaten
Offline valles10 - 18/07/2010 16:59
Avatar van valles10 HTML interesse
Martijn schreef:
als je uitrekken niet erg vind, kun je een div in je body plaatsen die 100% is met 0 margin en overflow auto, daarin een img in zetten die 100% width is (height gaat dan in proportie mee) en daarna je site. Als js je div streuctuur zo maakt:

<div met img></div>
<div container>
rest van site
</div>
moet dat gaan. Zoiets gebruik ik ook voor als ik 2 backgrounds moet repeaten

dan moet hij wel met z-indexes werken...
Offline gnotrgnotr - 19/07/2010 09:07
Avatar van gnotrgnotr Nieuw lid
css code - Bekijk de code zonder highlighting - Klap code in 
  1. position: fixed;
Offline WeedSide - 19/07/2010 11:54
Avatar van WeedSide Nieuw lid http://www.html...c4503.html

Greetz WeedSide  
Offline Martijn - 19/07/2010 12:02
Avatar van Martijn Crew PHP valles, nee hoor. Ik ga dat voorbeeld niet voor niets. Z-index is er standaard al, alleen niet soecifiek aangegeven. In mnvoorbeeld is de achtergrond 1 en de rest 2, want dat wordt later geplaatst
Offline gnotrgnotr - 19/07/2010 12:36
Avatar van gnotrgnotr Nieuw lid welke browser gebruik je?
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.193s