Stijlen

De standaardwaarde voor de eigenschap background-attachment is scroll , wat betekent dat de achtergrond langs het element schuift. Als u de waarde instelt op fixed , wordt de positie vastgezet.

Body, html, main ( /* important */ height: 100%; ) .cd-fixed-bg ( min-height: 100%; achtergrondgrootte: omslag; achtergrondbijlage: vast; achtergrondherhaling: geen herhaling ; achtergrondpositie: midden midden ) .cd-fixed-bg.cd-bg-1 ( achtergrondafbeelding: url("../img/cd-background-1.jpg"); ) .cd-fixed- bg.cd-bg-2 ( achtergrondafbeelding: url("../img/cd-background-2.jpg"); ) .cd-fixed-bg.cd-bg-3 ( achtergrondafbeelding: url( "../img/cd-background-3.jpg" ) .cd-fixed-bg.cd-bg-4 ( achtergrondafbeelding: url("../img/cd-background-4.jpg" ); .cd-scrollen-bg ( min. hoogte: 100%; )

Bij het installeren van een stationaire achtergrondafbeelding onder de tafel, waarin we tekst en andere nuttige informatie zullen hebben, wordt het volgende effect gecreëerd: bij het scrollen door een tabel met tekst blijft de achtergrond eronder stationair en beweegt niet mee met de tabel. Zoals hier:

Dit effect kan een illusie van dubbele gelaagdheid creëren, waardoor er wat ruimte op uw pagina's ontstaat.
Normaal gesproken wordt het effect van de achtergrond van een stilstaand beeld bereikt door de volgende kenmerken in te stellen op het CSS-stijlblad: background-attachment: fixed; We hebben het over een CSS-stylesheet, die je in een apart document hebt staan ​​met de extensie .css

Er zijn verschillende manieren om te installeren wat we nodig hebben.

1e methode.

We selecteren een afbeelding die onze achtergrond zal zijn. In dit geval maak ik deze foto (klik op de miniatuur om de volledige grootte te zien):

In het CSS-stijldocument, waar we de parameters voor BODY instellen, voegt u de volgende constructie in:

BODY(achtergrondafbeelding: url(adres achtergrondafbeelding); achtergrondbijlage: vast; achtergrondherhaling: niet-herhaling; achtergrondpositie: bovenaan;)

In dit geval nemen we een grote afbeelding op volledig scherm als achtergrondafbeelding (bijvoorbeeld 1280 bij 1024 px).

Opmerking: Als u geen document in CSS-stijl heeft, moet u er een maken zoals aangegeven in - en een link naar het document in CSS-stijl toevoegen in de code van uw html-pagina, zoals aangegeven in dezelfde les.

Dit zijn dus de parameters die we instellen met behulp van stijlen:

Achtergrondafbeelding: url(adres achtergrondafbeelding); - voer het adres van onze achtergrondafbeelding in 1280 bij 1024 px.

Achtergrondbijlage: vast; - we geven de achtergrond de instructie om vast te blijven, dat wil zeggen bewegingloos.

Achtergrondherhaling: geen herhaling; - we geven de achtergrond een instructie om deze niet te reproduceren.

Achtergrondpositie: boven; - stel de positie van de achtergrondafbeelding in: stel deze in op de bovenrand van de pagina.

Dus hebben we deze constructie in het CSS-stijldocument in BODY ingevoegd:

BODY(achtergrondafbeelding: url(adres achtergrondafbeelding); achtergrondbijlage: vast; achtergrondherhaling: niet-herhaling; achtergrondpositie: bovenaan;)

Ik heb een eenvoudige tabel op 70% van het scherm gemaakt en er tekst en twee afbeeldingen in geplaatst voor de duidelijkheid. Dit is wat we op de pagina kregen: (om het effect van een stilstaande achtergrond te zien, scrollt u de pagina omhoog en omlaag).

2e methode.

Laten we proberen een kleine afbeelding te plaatsen die zich automatisch herhaalt en de hele ruimte van de pagina vult en een achtergrondpatroon vormt. Hier is de foto:

Tegelijkertijd fixeren we de volledige achtergrond door de volgende constructie in het CSS-stijlblad te schrijven:

BODY (achtergrondafbeelding: url(adres van de achtergrondafbeelding); achtergrondbijlage: vast; )

Hier stellen we alleen de parameter in: background-attachment: fixed; - dat wil zeggen dat ze een instructie aan de browser voorschreven om de achtergrondafbeelding bewegingloos te maken. Omdat we niet tegen de afbeelding hebben gezegd dat deze zich niet mag vermenigvuldigen, zou deze zich op het hele scherm moeten vermenigvuldigen.

3e methode.

Laten we proberen een achtergrondafbeelding aan de ene kant te installeren en een tabel met tekst en afbeeldingen op de pagina aan de andere kant plaatsen, zodat deze de achtergrondafbeelding niet blokkeert. Om dit te doen, schrijft u het volgende in het CSS-document:

BODY (achtergrond:#e0ddd8 url(adres achtergrondafbeelding) niet-herhaling vast linksboven)

Achtergrond:#e0ddd8 url (adres van de achtergrondafbeelding) - de kleur onder de achtergrondafbeelding is beige, passend bij de achtergrondkleur van de afbeelding zelf. Dit wordt gedaan zodat de overgang van onze afbeelding naar de achtergrond niet zichtbaar is (de afbeelding beslaat slechts een deel van het scherm).

Geen herhaling - de foto vermenigvuldigt zich niet (er is één grote foto met een van mijn favoriete Amerikaanse acteurs - Robert Duvall).

Vast - de achtergrond is vast, dat wil zeggen bewegingloos.

Linksboven - uitgelijnd op de linkerbovenrand van het scherm (u kunt de afbeelding aan de rechterkant plaatsen en de sitetabel aan de linkerkant, zoals u wilt. Om dit te doen, schrijft u in het html-document in de tabel:

Deze korte les gaat over het creëren van een prachtige vaste achtergrond op uw website (of op een pagina van één pagina) die soepel van de ene afbeelding naar de andere overgaat terwijl de gebruiker door de pagina scrollt. CSS heeft de eigenschap background-attachment: fixed, waarmee u de achtergrondafbeelding kunt corrigeren. Dat wil zeggen: wanneer u door de pagina scrolt, scrollt deze niet met de pagina mee. Maar er is geen eigenschap in CSS waarmee we afbeeldingen kunnen wijzigen tijdens het scrollen, dus zullen we Javascript gebruiken.

Vaste achtergrond voor de site

Je begrijpt misschien niet waar ik over schrijf, dus bekijk de demo en je zult dit prachtige effect zelf zien:

Downloaden

Hoe maak je een veranderende achtergrond voor een website?

HTML

We beginnen met het definiëren van de HTML-structuur van de pagina waarvoor we dit effect maken:

In het etiket