28172 sujets

CSS et mise en forme, CSS3

[Résolu] Je n'arrive pas à afficher mon image en entiere

bonjour
je voudrai savoir si il est possible de faire en sorte qu'une image de background s'affiche entièrement et je ne trouve pas de commande pour le faire pourriez-vous me donner un coup de main
(et oui je débute en CSS)
un tour dans les tutos sur le site avec le mot clé background et tu trouvera tes réponses Smiley cligne
bon voici le html :
<script>
                image();
                function  image(){
                    var nombrea = Math.floor(Math.random() * 22 + 1);
                    if (nombrea == 1){
                        document.body.style.background = 'url("1438617991-wallhaven-91048.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 2){
                        document.body.style.background = 'url("wil-stewart-109690.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 3){
                        document.body.style.background = 'url("zac-ong-394558.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 4){
                        document.body.style.background = 'url("teddy-kelley-181683.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 5){
                        document.body.style.background = 'url("shazia-mirza-222594.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 6){
                        document.body.style.background = 'url("sam-goodgame-437215.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 7){
                        document.body.style.background = 'url("paul-morris-212014.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 8){
                        document.body.style.background = 'url("nathan-anderson-297460.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 9){
                        document.body.style.background = 'url("nathan-anderson-291067.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 11){
                        document.body.style.background = 'url("mohammad-alizade-341348.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 12){
                        document.body.style.background = 'url("matt-palmer-171734.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 13){
                        document.body.style.background = 'url("martin-sattler-160751.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 14){
                        document.body.style.background = 'url("martin-jernberg-297304.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 15){
                        document.body.style.background = 'url("marc-olivier-jodoin-409708.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 16){
                        document.body.style.background = 'url("lucian-moldovan-180777.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 17){
                        document.body.style.background = 'url("levi-bare-290789.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 18){
                        document.body.style.background = 'url("joshua-earle-183442.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 19){
                        document.body.style.background = 'url("jamison-mcandie-112376.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 20){
                        document.body.style.background = 'url("clayton-caldwell-382402.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 21){
                        document.body.style.background = 'url("bryan-goff-360297.jpg")';
                        document.body.style.background = 'contain';
                    }
                    if (nombrea == 22){
                        document.body.style.background = 'url("aperture-vintage-346923.jpg")';
                    }
                } 
                setInterval(image,5000)
            </script>

et voici le CSS: 
body{
    background-size: auto auto;
}

est-ce que il y a un problème dans mon code ?
Modifié par menardisaac (08 Feb 2018 - 15:39)
Re.

Le problème exact c'est quoi ??
Là tu fais ce genre de chose à chaque fois.

document.body.style.background = 'url("clayton-caldwell-382402.jpg")';
                        document.body.style.background = 'contain';

Donc tu assignes d'abord une image, puis immédiatement tu assignes 'contain'... Smiley hum
c'est quoi contain ?? y a quoi dedans ?

Et donc pour le complément d'info...
L'image ne s'affiche pas complètement, cad ?? elle ne fini pas de se charger ?? elle ne prend qu'un tiers de la page ?? bref pas facile d'aider sans infos Smiley smile
C'est comme demander dans paris : "comment aller à la boulangerie ?"
contain c'etait des tests mais je l'ai retiré
voilà le soucis quand j'affiche l'image il me met un gros plan dessus et donc on ne voit que un petit bout de l'image
ah ok Smiley smile donc tu as un problème d'échelle Smiley smile
Je répète cherche dans les tutos Smiley smile -> Arrière-plans avec CSS3 Backgrounds
en page 2 tu trouveras ce qui t'intéresse Smiley smile
je viens de trouvé le problème, quand je met mon background-size avec f12 il raille la commande, pourquoi ?
c'est pas en css que t'as des problèmes Smiley smile c'est en js

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

dans ton autre post il t'était a juste titre conseillé d'utiliser la prop background
parce que background peut contenir toutes tes directives en une seule fois, y compris celles que tu ne peux pas toucher autrement...

Sinon en JS tous les background-* sont en général reconnus avec une écriture du type background et l'élément derrière le tiret collé et avec une majuscule Smiley smile
backgroundImage, ou backgroundColor . En js la casse est ultra importante Smiley smile
bref tu peux aussi essayer avec backgroundSize
Meilleure solution
Sujet clos
Aller à