Hallo

Ik heb een afbeelding ( horizontaal ) die ik op het ganse scherm wil weergeven zonder REPEAT.
Op mijn computerscherm heb ik het werkende, deze wordt in proportie gewijzigd.

Anders is het op mijn mobiele ANDROID toestellen. Horizontale standen zijn geen probleem.
Probleem is wanneer ik begin te draaien :

- Verticale stand van het scherm : groot stuk heeft geen afbeelding, maar de kleur van de BODY.
- Wisselen van stand zal ervoor zorgen dat er een stuk afbeelding weg is. F5 en het is opgelost.

Heeft er iemand code beschikbaar die zo compatibel mogelijk is met diverse browsers en schermen?
Hopelijk is het wat duidelijk wat ik aan de hand heb ...

Met vriendelijke groeten
Wesley

Probeer het volgende:

Code:

body,html{
width: 100%;
height: 100%;
}

.bgdiv{
    height: 100%;
    width: 100%;
    background-image: url('../image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

Of:

Code:

html{ width: 100%; height: 100%; margin: 0; padding: 0; }
body{
width: 100%;
height: 100%;
background-image: url('../image.jpg');
background-repeat: no-repeat;
background-size: cover;
}

Origineel gepost door Harings Rob

Probeer het volgende:

Code:

body,html{
width: 100%;
height: 100%;
}

.bgdiv{
    height: 100%;
    width: 100%;
    background-image: url('../image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

Of:

Code:

html{ width: 100%; height: 100%; margin: 0; padding: 0; }
body{
width: 100%;
height: 100%;
background-image: url('../image.jpg');
background-repeat: no-repeat;
background-size: cover;
}

Ideaal! Bedankt!
Werkt perfect op Android.

-- Ter uitbreiding --

Het bovenstaande werkt, maar op een mobiel ( Android ) is er nog een detail.
Wanneer men gaat scrollen zal de adresbalk op een gegeven moment verborgen worden.
Daardoor komt er een witte ruimte onderaan waardoor de achtergrond opnieuw geresized gaat worden.
Is er een manier om dat te voorkomen? Google geeft tal van mogelijkheden, maar werkende heb ik het niet gekregen.

Dit is een mooie link: http://css-tricks.com/perfect-full-p...kground-image/

Origineel gepost door WesleyVN

Het bovenstaande werkt, maar op een mobiel ( Android ) is er nog een detail.
Wanneer men gaat scrollen zal de adresbalk op een gegeven moment verborgen worden.
Daardoor komt er een witte ruimte onderaan waardoor de achtergrond opnieuw geresized gaat worden.
Is er een manier om dat te voorkomen? Google geeft tal van mogelijkheden, maar werkende heb ik het niet gekregen.

Welke telefoon, en welke browser? Dit effect heb ik op mijn Galaxy S3 met Dolphin Browser nog niet gezien. Besef overigens dat er voor Android nogal wat browsers zijn waar je niet echt vrolijk van wordt, en heel veel Android browsers hebben functies als 'fullscreen' en 'desktop mode' waardoor het wel eens knap ingewikkeld kan zijn.

Ik heb een extra regel code toegevoegd in de media queries om tot een oplossing te komen.
Het zou nu in orde moeten zijn voor zover ik het zelf kan testen natuurlijk :

Code:

html, body { margin:0; padding:0; overflow-x:hidden; }

-- BIJKOMEND VRAAG --

Ik zal in mijn css een afbeelding gaan inladen voor de achtergrond.
Wanneer ik deze verder ga overschrijven in mijn css, zal de eerste dan ook nog geladen worden ?

Als je deze gaat overschrijven, waarom zou je deze dan in eerste instantie al gaan laden? ;)

Origineel gepost door Harings Rob

Als je deze gaat overschrijven, waarom zou je deze dan in eerste instantie al gaan laden? ;)

Oorspronkelijk wou ik met media queries de achtergrond gaan inladen.
Mooi idee, maar IE8 toont de achtergrond dan niet. Gewoon in de body plaatsen wel.
Vandaar dat ik deze in de body wou plaatsen en ook in de media queries ...

Momenteel gebruikt nog 3% van alle Nederlanders IE8... ik zou dan ook niet te moeilijk doen en gewoon lekker de normale achtergrond in IE8 tonen.