Achtergrond meescrollen

Status
Niet open voor verdere reacties.
Egel007

Egel007

Gebruiker
Lid geworden
4 dec 2007
Berichten
271
Beste forummers,

Ik ben eens volledig opnieuw begonnen met mijn vaardigheden qua HTML, en nu ik bezig ben met het maken van een fansite stootte ik al meteen tegen mijn eerste probleempje. Op één van de pagina's staat namelijk een redelijke lap tekst, en de achtergrond repeat zichzelf wanneer je naar beneden kunt scrollen. Ik heb niet echt een achtergrond-afbeelding die er mooi uitziet wanneer hij zich repeat (lelijke kleurovergangen, strakke lijnen, je kent het wel), dus wil ik graag dat hij mee scrollt wanneer iemand naar beneden scrollt zonder te haperen, etc. Via Google ben ik wel op een oplossing gestuit, maar dat bevatte CSS en daar heb ik nog geen ervaring mee, helaas, dus kon ik die oplossing nog niet helemaal toepassen.

Dus kan iemand mij eventueel vertellen hoe ik de achtergrond kan mee laten scrollen in HTML?
Bij voorbaat dank natuurlijk! :thumb:
 
Volgens mij ontkom je niet aan een stukje css, maar dat kan wel in de html verweven worden:
HTML: 
<html>
	<head>
		<Style type="text/css">
			BODY {background-attachment: fixed;}
		</Style>
	</head>
	<body background="temp.jpg">
		bla bla bla
	</body>
</html>
Er zijn ook oplossingen die in de body tag de property bgproperties="fixed" meegeven, maar dat werkt alleen maar in Internet Explorer en niet in bijv. Firefox
 
... en als er dan toch al een css stijlblokje in de <head> staat, dan kan ook de bron van de achtergrondfiguur er mooi in; dan hoeft ie niet in de body-tag.
  • Komt goed uit, want dat <body background="..."> is al bij de geboorte van HTML4.0 tot afgekeurd attribuut verklaard (en we zitten nu al jaren op HTML4.1, HTML5 staat al te popelen). ;)
Een voorbeeld van een gefixeerde achtergrondfiguur in de body kan je hier live zien. Daar is de foto van de zuilengaanderij de gefixeerde achtergrond-figuur in de body.
De gebruikte:
HTML: 
<html>
<head>
   ...
   <style type="text/css">
      body {
         background: #687EAC url('images/bg-stoa.gif'); 
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-position: 50% 100px;
      }
   </style>
</head>

<body>
...
...
</body>
</html>
De betekenis van de css-eigenschappen is:
  • De #687EAC is de blauwe achtergrondkleur op de plaatsen waar de foto niet zit.
  • Het plaatje zit in een submapje "images" van de map van de betreffende html-pagina.
  • De achtergrond-figuur is op "niet herhalen" gezet, anders zou de foto ook nog gedeeltelijk erboven, eronder en aan de zijkanten herhaald worden ( steeds pal ertegenaan geplakt).
  • De aanhechting aan de pagina is dus: gefixeerd.
  • De achtergrond-positie is hier 50% horizontaal (precies in het midden tussen links en rechts), en 100px vanaf de bovenrand.

Met vriendelijke groet,
CSShunter
 
Hojo! :shocked:
Nu lees ik in de startvraag dat de achtergrond van de pagina juist wel mee moet scrollen met de pagina! Alleen niet in zich herhalende vorm.
Maar dat kan gelukkig ook! Dit is precies dezelfde bladzijde, maar dan met mee-scrollende body-bg. Alles in het stijlblokje in de <head> blijft hetzelfde, behalve:
HTML: 
...
   background-attachment: scroll;
...
Of het hele regeltje van de background-attachment weglaten, want de background-attachment staat standaard al automatisch op "scroll".

Afijn, kiest u maar: er zijn met css altijd veel mogelijkheden! :)
CSShunter
 
Haa, harstikke bedankt!
Niet alleen voor de oplossingen, maar ook nog eens voor de uitleg!
Ik heb het even uitgeprobeerd, en heb het toegepast aan mijn website en het resultaat?
Het werkt!

Toppie! Dankjewel.
:thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan