Afbeelding als achtergrond begint halverwege

Vragen over html, css en aanverwante onderwerpen die met het maken van 'n site te maken hebben. In principe, vanwege tijdgebrek, alleen over code op deze site, maar je kunt natuurlijk altijd proberen...
Plaats reactie
bduit
Berichten: 3
Lid geworden op: vr 08 apr 2016, 15:54

Afbeelding als achtergrond begint halverwege

Bericht door bduit » vr 08 apr 2016, 16:24

Ik heb het volgende in css:
#wrapper {
position:relative;
width:1000px;
height:auto;
margin-left:auto;
margin-right:auto;
font-family:verdana;
font-size:14px;
background: url('plaatjes/molen2-1000.jpg') fixed;
}
De afbeelding molen2-1000.jpg (1000x1500) begint nu ongeveer halverwege de afbeelding links in de pagina. Het eerste gedeelte van de afbeelding komt sluit hieraan
__________________________________________________________
| | |
| linker deel van de afbeelding | rechter deel van de afbeelding |
| | |
| | |
|________________________________________________________|

Als het venster van de browser smaller gemaakt wordt verschuift de afbeelding naar links. Indien de breedte van het venster gelijk is aan de webpagina, is de afbeelding ok.
Wat moet ik doen om de afbeelding helemaal goe op het scherm te krijgen?

Goeroeboeroe
Beheerder
Berichten: 250
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Afbeelding als achtergrond begint halverwege

Bericht door Goeroeboeroe » vr 08 apr 2016, 17:11

Hallo,

Eigenlijk is dit forum meer bedoeld voor vragen over de voorbeelden op deze site, maar ik zal even proberen hierop te antwoorden.
Helemaal duidelijk is je vraag niet voor me, maar mogelijk heb je hier toch iets aan. Het is me niet helemaal duidelijk of je bedoelt dat de linkerkant van de afbeelding halverwege de pagina komt te staan, of dat niet de hele afbeelding zichtbaar is.
Met 'fixed' zet je de achtergrondafbeelding vast ten opzichte van de browser, niet ten opzichte van #wrapper. Bij scrollen blijft de afbeelding, als het goed is, stilstaan.
Een achtergrondafbeelding heeft nooit een vaste maat. Als de afbeelding 1000 px breed is en #wrapper maar 600, dan zie je maar 600 px van die afbeelding. Dat hoort gewoon zo. De rechter 400 px vallen weg.
In css3 zijn daar wat oplossingen voor gekomen.

Code: Selecteer alles

 background: url('plaatjes/molen2-1000.jpg') fixed contain;
contain: vul #wrapper volledig en schaal de afbeelding. Als #wrapper bijvoorbeeld 800 px breed is, wordt de afbeelding geschaald naar 800 x 1200 px. De afbeelding wordt dus niet vervormd. Als #wrapper bijvoorbeeld 1000 px hoog is, wordt de afbeelding geschaald naar 666 x 1000 px. Oftewel: de kleinste maat (hoogte of breedte) van #wrapper bepaalt de grootte van de afbeelding. Met no-repeat kun je eventueel herhaling van de afbeelding voorkomen. Je houdt hierbij dus lege ruimte over, maar voorkomt vervorming.
De afbeelding wordt automatisch gecentreerd, tenzij je dat met 'n andere eigenschap voorkomt.

Code: Selecteer alles

 background: url('plaatjes/molen2-1000.jpg') fixed cover;
cover: dit is min of meer het omgekeerde. De hele achtergrond van #wrapper wordt gevuld met de hele afbeelding. Als #wrapper bijvoorbeeld 1000 px breed ie en 400 px hoog (het maakt niet uit of je als hoogte auto opgeeft, de browser weet de echte hoogte van #wrapper) wordt de breedte goed weergegeven, maar de hoogte van 1500 px wordt samengeknepen tot 400 px, wat een lachspiegel-effect oplevert.

Als dat kan wat betreft de afbeelding, zou je die met 50% 50% (of center center) halverwege #wrapper kunnen zetten. Om precies te zijn: het midden van de afbeelding wordt dan in het midden van #wrapper gezet, ongeacht hoogte en breedte van #wrapper:

Code: Selecteer alles

background :url('plaatjes/molen2-1000.jpg') fixed center center;
Ook dan vervormt de afbeelding niet. Door no-repeat toe te voegen, voorkom je herhaling als #wrapper groter is dan de afbeelding.
Maar dit kan natuurlijk niet altijd. Als de afbeelding een paard is en #wrapper is smaller dan 1000 px, is het arme dier gelijk onthoofd.

Als ik je vraag verkeerd heb begrepen, moet je dat maar even melden.

bduit
Berichten: 3
Lid geworden op: vr 08 apr 2016, 15:54

Re: Afbeelding als achtergrond begint halverwege

Bericht door bduit » vr 08 apr 2016, 18:56

Sorry, ik had niet begrepen dat dit forum alleen bedoeld is voor voorbeelden de website. Maar toch tof dat je een antwoord hebt gegeven, nog toffer voor het snelle beantwoorden.
Ik za;proberen mijn probleem anders te formuleren. Foto molen2 lijkt doormidden geknipt. Het rechter deel komt als eerste en dan het linkerdeel
Mijn dank voor het antwoord.
Ber.

Goeroeboeroe
Beheerder
Berichten: 250
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: Afbeelding als achtergrond begint halverwege

Bericht door Goeroeboeroe » vr 08 apr 2016, 23:36

Nou, niet echt alleen voor dingen hier, maar je hebt grote kans dat het wegens tijdgebrek lang kan duren voor je 'n antwoord krijgt. Dat is vooral de reden dat 'n groter forum vaak beter is voor algemene vragen.

Nu begrijp ik je probleem. Als je 'fixed' gebruikt, is wordt de achtergrond-afbeelding ten opzichte van het venster van de browser neergezet. Als #wrapper dus bijvoorbeeld 200 px naar rechts staat, zie je de meest linkse 200 px niet, want de afbeelding staat als het ware in het venster van de browser. Dat verklaart ook waarom het bij een bepaalde breedte wel goed werkt.

Je zou in plaats van 'fixed' kunnen proberen 'scroll'. (Ik ga er wel vanuit dat je Firefox, Safari, Opera, Chrome of Internet Explorer 11 of later gebruikt). Nu wordt de afbeelding ten opzichte van #wrapper geplaatst en scrolt niet mee als #wrapper wordt gescrold. Maar wel als de hele pagina wordt gescrold. Maar daarmee is het probleem van de afmeting niet opgelost.
Dit is niet echt op te lossen. Althans: je kunt wel in plaats van 'fixed' 'contain' of 'cover' proberen, maar dan heb je dus lege plekken óf de foto vervormt.
Een achtergrondafbeelding is, zonder vervorming en zonder lege plekken, alleen volledig zichtbaar als hij precies in het element past. Dus zodra #wrapper niet precies 1000 x 1500 px is, zit je of met lege plekken, of met een vervormde foto. Met 'contain' wordt de afbeelding helemaal zichtbaar en zonder lege plekken, maar alleen zonder vervorming als de verhoudingen hetzelfde zijn als bij 1000 x 1500, dus bijvoorbeeld 500 x 750, of 400 x 600.

Je zou de afbeelding met 50% 50% kunnen centreren, maar dan vallen aan de buitenkant delen weg als #wrapper kleiner is dan 1000 x 1500 px.

Wat jij wilt ís wel op te lossen, maar dan met een gewone afbeelding. En het is behoorlijk ingewikkeld. Ooit hoop ik daar iets over te schrijven, maar dat zal nog wel even duren.
Als je zoekt op 'picture element art direction' vind je wat jij zoekt. Het meeste is wel Engelstalig. (Er is wel wat in het Nederlands over geschreven, maar niet heel veel.) Je laat dan, afhankelijk van de grootte van het element, een bepaald deel van de afbeelding zien. Maar dat moet ook nog kunnen: van een dier kun je bezwaarlijk alleen de romp laten zien, als de rest niet past.
Ik hoop je toch 'n beetje op weg geholpen te hebben.

bduit
Berichten: 3
Lid geworden op: vr 08 apr 2016, 15:54

Re: Afbeelding als achtergrond begint halverwege

Bericht door bduit » za 09 apr 2016, 17:36

Niet alles werkt, maar ik kom met fixed 50% 0% precies wat ik hebben wil.
Ik wil je nogmaals danken voor goede en vooral uitgebreide antwoord. Daar mag menigeen een voorbeeld aan nemen.
Ik ben zelf een pure beginner, net een paar maanden geleden begonnen.
groet,
Ber

Plaats reactie