Toon posts:

[CSS] Achtergrond grootte aanpassen aan venster

Pagina: 1

Acties:

258 views sinds 30-01-2008
Reageer

vrijdag 17 januari 2003 01:45

Acties:

Verwijderd

Topicstarter

Ik was een beetje aan het prutsen voor een eigen website.. Nou zit ik al uren vast op een bepaald punt. Vanwege de layout wil ik dat op een inline-frame (waar de body staat) een achtergrond komt die zich aanpast aan je venster.

Ik heb gezocht via google.nl en w3schools.com...
Dit is het beste dat me is gelukt :/

Je kunt zien dat ie 100% groot is, en blijft nadat je de venstergrootte veranderd. Hij staat op de achtergrond van de tekst. Maar nadat je gaat scrollen, scrolt het plaatje gewoon mee. Is dit misschien uit te zetten, of misschien een andere oplossing

Bij voorbaat dank

vrijdag 17 januari 2003 01:47

Acties:

Eskimootje

style="position: relative; top: 0px; left: 0px; z-index: -1" dit heeft weinig met css te maken
maak er eens: style="position: top; margin: 0px; z-index: -1" van dat werkt vast beter en is iig fatsoenlijk css.

[ Voor 51% gewijzigd door Eskimootje op 17-01-2003 01:52 ]

vrijdag 17 januari 2003 01:49

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

background-attachment : fixed; erop

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 17 januari 2003 01:52

Acties:

Verwijderd

Topicstarter

RobIII schreef op 17 January 2003 @ 01:49:
background-attachment : fixed; erop

dacht ik ook al aan..
Maar het is geen background, maar een <img>. Een background kun je niet uitrekken tot 100%. (Ik zal het toch ff proberen!

)

edit:
bedankt, maar het werkt niet helaas

[ Voor 10% gewijzigd door Verwijderd op 17-01-2003 01:54 ]

vrijdag 17 januari 2003 01:57

Acties:

Verwijderd

Topicstarter

Eskimootje schreef op 17 januari 2003 @ 01:47:
style="position: relative; top: 0px; left: 0px; z-index: -1" dit heeft weinig met css te maken
maak er eens: style="position: top; margin: 0px; z-index: -1" van dat werkt vast beter en is iig fatsoenlijk css.

Op de manier die ik heb gebruikt stond het beschreven op w3schools.com (onder de catagorie CSS). Ik heb geprobeerd wat je voorstelt, maar het werkt niet helaas.

vrijdag 17 januari 2003 02:03

Acties:

Eskimootje

Verwijderd schreef op 17 January 2003 @ 01:57:
[...]
Op de manier die ik heb gebruikt stond het beschreven op w3schools.com (onder de catagorie CSS). Ik heb geprobeerd wat je voorstelt, maar het werkt niet helaas.

Ok wat wil je precies? Plaatje 100% breed en op welke postie?

vrijdag 17 januari 2003 02:10

Acties:

Verwijderd

Topicstarter

Ik wil het volgende...
Positie: 0px bij 0px (helemaal links boven)
Grootte: 100% bij 100% (schermvullend dus)

en ik moet dus kunnen scrollen zonder dat er iets gebeurd met het plaatje.

vrijdag 17 januari 2003 02:32

Acties:

Verwijderd

Topicstarter

Ik ben niet de enige die met dit probleem zit. Bij w3.org vinden ze het een goed idee om de css uit te breiden. lees

Misschien kan is het antwoord wel DHTML of JavaScript?

vrijdag 17 januari 2003 02:32

Acties:

Verwijderd

Begin met

code:

1	<body style="margin-left : 0px; margin-top : 0px;">

Op http://rohs.nl/index.css en http://www.daroberto.nl/index.css vind je een paar goede voorbeelden van juiste CSS files.

[ Voor 14% gewijzigd door Verwijderd op 17-01-2003 02:33 . Reden: Typfoutje en [code] toegevoegd :) ]

vrijdag 17 januari 2003 02:37

Acties:

Verwijderd

Topicstarter

ViVa, ik heb de CSS files doorgespit, maar zij lossen mijn probleem niet op.
-----------------

1. Is het duidelijk wat mijn probleem precies is?
2. Is het überhaupt wel mogelijk? Moet ik misschien van het hele idee afstappen?

vrijdag 17 januari 2003 07:00

Acties:

Verwijderd

Ik denk zelf dat je van dit idee af moet stappen... Om de volgende redenen:

1. als de background zich aanpast aan het formaat van de browser wordt alles wat trager.. zeker op oude pc's en vooral als er straks ook nog veel info op de page komt te staan..
2. als de background fixed is maar zich wel moet aanpassen aan de het formaat van het window dan kan het zijn dat ie niet proportioneel gescaled wordt... lijkt mij niet zo mooi...

Je zou bijvoorbeeld wel de site in een window met een fixed size kunnen openen, dan weet je zeker dat de bg altijd mooi in beeld staat, daarnaast kan je dan ook css gebruiken om 'm niet mee te laten scrollen... Andere optie is bijvoorbeeld ook een centered frameset, waarbij het contentframe een vast formaat heeft...

vrijdag 17 januari 2003 07:52

Acties:

crisp

Devver

Pixelated

De mooiste oplossing:

code:

1	style="position: fixed; top: 0px; left: 0px;"

wat jammer nou dat IE dit nog niet ondersteund

Alternatief (schematisch):

HTML:

<html>
<head>
<style type="text/css">
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}
#background {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 1;
}
# bgimage {
  width: 100%;
  height: 100%;
}
#content {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  overflow: auto;
  z-index: 2;
}
</style>
</head>
<body>
<div id="background">[img]"background.jpg"[/img]</div>
<div id="content">
hier je content
</div>
</body>
</html>

[ Voor 27% gewijzigd door crisp op 17-01-2003 12:15 ]

Intentionally left blank

vrijdag 17 januari 2003 09:52

Acties:

Verwijderd

Topicstarter

Bedankt allemaal voor het helpen. Ik heb alles geprobeerd wat jullie zeiden, maar ik denk dat er niet een simpele oplossing voor is. Als er een oplossing voor is zal deze idd. misschien wel wat problemen met zich meenemen zoals snelheid.

Ik ga op zoek naar een nieuw idee..

vrijdag 17 januari 2003 12:08

Acties:

Hangloozz

{ @$%&# }

huh, en crisp z'n code schopt kont; precies wat je wilt...waarom gebruik je dat dan niet?

okee, hij heeft een paar vette fouten in de code zitten

maar dat mag de pret niet drukken.
dit:

code:

1	<style="type/css">

moet je ff wijzigen in:

code:

1	<style type="text/css">

en ff een head-tag toevoegen na het styleblock en voor de body:

code:

1
2
3

</style>
</head>
<body>

www.jurgroessen.nl

vrijdag 17 januari 2003 12:16

Acties:

crisp

Devver

Pixelated

Hangloozz schreef op 17 januari 2003 @ 12:08:
huh, en crisp z'n code schopt kont; precies wat je wilt...waarom gebruik je dat dan niet?

okee, hij heeft een paar vette fouten in de code zitten maar dat mag de pret niet drukken.
[...]

Huh? Foutjes? Waar dan?

Intentionally left blank

vrijdag 17 januari 2003 15:19

Acties:

Verwijderd

Topicstarter

Je hebt 100% gelijk!

Ik heb nog ff width="100%" en height="100%" toegevoegd aan de <img>

Super Bedankt!

* heil GoT $_/-\o_$ *

Pagina: 1

Reageer