vue background cover
Kommunauty
Connexion
Inscription

Forum Programmation background cover

background cover


jeandub Messages : 151

Bonjour à tous.

J'ai mis un background-image sur mon site et lui ai attribué cover pour qu'il occupe tout l'espace sans déformation.

J'ai mis ce cover sur <html>. Le problème est que l'image est tronquée en haut et en bas dans le navigateur par les barres d'outils du navigateur.

J'ai essayé en mettant le cover sur <body> mais ça ne change rien.

Vous avez une idée ?

je vous joins une image.
samedi 14 mai 2016 (Dernière édition samedi 14 mai 2016)

Homer Messages : 1925

Je mets ça moi, et je n'ai jamais eu de soucis :

html { 
  margin:0;
  padding:0;
  background: url(image/bg.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}
dimanche 15 mai 2016

jeandub Messages : 151

Salut Homer.

Désolé je n'avais pas vu ta réponse.

J'ai essayé ta méthode mais ça ne marche pas.

Je te mets mon code:

html {
	width:100%;
	margin:0;
	padding:0;
  
}

body {
	width:100%;
	margin: 0;
	padding: 0;
	overflow: scroll;
	}
	
#container {
	width:100%;
	height:800px;
	padding-top:50px;
	background:url(images/tv%20page%20accueil%201.jpg) no-repeat center;
 	background-size: cover;
	webkit-background-size: cover;
	moz-background-size: cover;
}

Si tu veux aller voir le site l'adresse est : http://labaraquetv2.labaraquetv.fr/index.php
mercredi 8 juin 2016 (Dernière édition mercredi 8 juin 2016)

Homer Messages : 1925

Met le background dans l'html et non dans le container
jeudi 9 juin 2016

jeandub Messages : 151

J'ai essayé et ça ne change rien, j'ai toujours l'ascenceur vertical.

Est-ce que une height à 100% changerait quelque chose ?
jeudi 9 juin 2016 (Dernière édition jeudi 9 juin 2016)

Notorius Messages : 589

C'est pas le "overflow:scroll" qui te créé l'ascenseur justement?

Sinon comme dit Homer, tu peux tout coller dans le html. Mais avec d'autres paramètres ( exemple piqué au hasard sur le net) :


html{
	/* This image will be displayed fullscreen */
	background:url('background.jpg') no-repeat center center;

	/* Ensure the html element always takes up the full height of the browser window */
	min-height:100%;

	/* The Magic */
	background-size:cover;
}
vendredi 10 juin 2016

jeandub Messages : 151

Bonjour Notorius

J'ai essayé tout ça mais ça ne va pas mieux. J'ai toujours l'ascenceur vertical et le haut de mon background est caché.

Je n'y comprend vraiment rien.

L'image background a d'ailleurs changé. Je vais mettre ça sur le serveur distant,si vous avez l'occasion de regarder...
dimanche 12 juin 2016

jeandub Messages : 151

Le nouveau background est le suivant :

Comme vous pouvez le voir, le haut de l'image n'apparait pas sur le site et j'ai donc toujours l'ascenceur alors que je voudrais que l'image tienne dans l'écran sans avoir à défiler.
dimanche 12 juin 2016

Homer Messages : 1925

Essai ça : 

html {
    margin: 0;
    padding: 0;
    background: url(images/tv%20page%20accueil%201.jpg) no-repeat center center fixed;
    background-size: 100% 100%;
    webkit-background-size: 100% 100%;
    moz-background-size: 100% 100%;
}
body {
    width: 100%;
    margin: 0;
    margin-top: 150px;
    padding: 0;
}
dimanche 12 juin 2016

jeandub Messages : 151

Bien vu, j'ai déjà mis le margin-top au body et je récupère le haut du background.

Je vais essayer le reste (background-size : 100% 100%)

Merci
dimanche 12 juin 2016

Page suivante »
Pages : 012

Forum Programmation background cover

Kommunauty © Tous droits réservés Contact / Charte & Mentions légales / Hebergement gratuit / Bon plan hébergement / Aide B2i

RSS