Background color et image ne s'affiche pas ENSEMBLE

Fouad Zaakir
Les bases HTML/CSS

Bonjour;

Voici mes deux fichers index et style:
index:

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>EPH ARRIS 1</title>
    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="jumbotron">

        <div class="container">
             <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand gr" href="#">EPH ARRIS 1</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right ">
        <li class="active"><a href="#">ACCEUIL</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">HISTORIQUE</a></li>
        <li><a href="#">3COH</a></li>
        <li><a href="#">CONTACT</a></li>

      </ul>
       </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav><!--fin de navigateur-->

    <div class="row text-center">
        <h1>BIENVENUES SUR NOTRE SITE <span>EPHARRIS 1</span> </h1>
        <h3>Tous <span>Les Nouvelles </span>Sur L’hôpital, Services, Médecins,.....</h3>
        <a href="#" class="btn btn-primary btn-lg ">Lire la suite...</a>

    </div>   
        </div>
    </div> <!--fin de header-->

    <div class="services">
        <div class="container">
            <div class="row">
                <div class="services-mg text-center">
                    <div class="col-md-4">
                        <span class="icon-sprite sprite-mg"></span>
                        <h4>MEDECINE INTERNE</h4>
                        <P>La médecine interne est une spécialité médicale. Elle s'intéresse au diagnostic et à l a prise en charge globale des maladies de l'adulte avec une prédilection pour les maladies systémiques </P> 
                        <a href="#" class="more">Lire la suite</a>

                    </div>
                </div>
                <!--fin de mg-->

                <div class="services-cg text-center">
                    <div class="col-md-4">
                        <span class="icon-sprite sprite-cg"></span>
                        <h4>CHERURGIE GENERALE</h4>
                        <p>La chirurgie est l'ensemble des techniques médicales consistant en une intervention physique sur les tissus, notamment par incision et suture. Un médecin spécialiste dans ces disciplines est un chirurgien.</p>
                        <a href="#" class="more">Lire la suite</a>

                    </div>
                </div>
                <!--fin de cg-->

                <div class="services-umc text-center" >
                    <span class="icon-sprite sprite-umc"></span>
                    <div class="col-md-4">
                        <h4>UMC</h4>
                        <p>La médecine d'urgence rassemble les ressources médicales et chirurgicales pour faire face à une urgence, c'est-à-dire la perception d'une situation où la personne sans soins empire rapidement</p>
                        <a href="#" class="more">Lire la suite</a>
                    </div>

                </div>
            <!--fin de umc-->

            </div>
        <!--fin de row-->

        </div>
    </div>
    <!--fin de servcices-->
    <!-- ******************************************************************************************************* -->   
    <div class="actualite">
        <div class="heading text-center">

            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <h1>Actualites</h1>

                    </div>
                    <div class="col-md-6 ">
                        <div class="control-right">  
                            <a href="#" class="btn btn-default">afficher tout</a></div>
                    </div>

                </div>

            </div>
        <!--fin de actualite-->
        </div>
        <!--fin de heading-->
        <div class="gellery">
            <div class="gallery-inner">
                <img src="img/1.jpg"alt="thumbnail" class="img-responsive" width="400" height="400">
                <div class="caption">
                        <div class="caption-heading">
                            <h4>Titre</h4> 
                            <small>01 janvier 2014</small>
                        </div>

                        <div class="btn-group btn-trigger">
                            <a href="#" class="btn btn-default web-link">Lien</a>
                            <a href="#" class="btn btn-default web-link">Plus</a>
                        </div>
                </div>
                <!--fin de gcaption-->
                <div class="gallery-inner">
                <img src="img/2.jpg"alt="thumbnail" class="img-responsive" width="400" height="400">
                <div class="caption">
                        <div class="caption-heading">
                            <h4>Titre</h4> 
                            <small>01 janvier 2014</small>
                        </div>

                        <div class="btn-group btn-trigger">
                            <a href="#" class="btn btn-default web-link">Lien</a>
                            <a href="#" class="btn btn-default web-link">Plus</a>
                        </div>
                </div>
                <!--fin de gcaption-->   
                <div class="gallery-inner">
                <img src="img/3.jpg"alt="thumbnail" class="img-responsive" width="400" height="400">
                <div class="caption">
                        <div class="caption-heading">
                            <h4>Titre</h4> 
                            <small>01 janvier 2014</small>
                        </div>

                        <div class="btn-group btn-trigger">
                            <a href="#" class="btn btn-default web-link">Lien</a>
                            <a href="#" class="btn btn-default web-link">Plus</a>
                        </div>
                </div>
                <!--fin de gcaption-->       
                <div class="gallery-inner">
                <img src="img/4.jpg"alt="thumbnail" class="img-responsive" width="400" height="400">
                <div class="caption">
                        <div class="caption-heading">
                            <h4>Titre</h4> 
                            <small>01 janvier 2014</small>
                        </div>

                        <div class="btn-group btn-trigger">
                            <a href="#" class="btn btn-default web-link">Lien</a>
                            <a href="#" class="btn btn-default web-link">Plus</a>
                        </div>
                </div>
                <!--fin de gcaption-->       
                <div class="gallery-inner">
                <img src="img/5.jpg"alt="thumbnail" class="img-responsive" width="400" height="400">
                <div class="caption">
                        <div class="caption-heading">
                            <h4>Titre</h4> 
                            <small>01 janvier 2014</small>
                        </div>

                        <div class="btn-group btn-trigger">
                            <a href="#" class="btn btn-default web-link">Lien</a>
                            <a href="#" class="btn btn-default web-link">Plus</a>
                        </div>
                </div>
                <!--fin de gcaption-->       
                <div class="gallery-inner">
                <img src="img/6.jpg"alt="thumbnail" class="img-responsive" width="400" height="400">
                <div class="caption">
                        <div class="caption-heading">
                            <h4>Titre</h4> 
                            <small>01 janvier 2014</small>
                        </div>

                        <div class="btn-group btn-trigger">
                            <a href="#" class="btn btn-default web-link">Lien</a>
                            <a href="#" class="btn btn-default web-link">Plus</a>
                        </div>
                </div>
                <!--fin de gcaption-->   
                <div class="gallery-inner">
                <img src="img/7.jpg"alt="thumbnail" class="img-responsive" width="400" height="400">
                <div class="caption">
                        <div class="caption-heading">
                            <h4>Titre</h4> 
                            <small>01 janvier 2014</small>
                        </div>

                        <div class="btn-group btn-trigger">
                            <a href="#" class="btn btn-default web-link">Lien</a>
                            <a href="#" class="btn btn-default web-link">Plus</a>
                        </div>
                </div>
                <!--fin de gcaption-->       
                <div class="gallery-inner">
                <img src="img/7.jpg"alt="thumbnail" class="img-responsive" width="400" height="400">
                <div class="caption">
                        <div class="caption-heading">
                            <h4>Titre</h4> 
                            <small>01 janvier 2014</small>
                        </div>

                        <div class="btn-group btn-trigger">
                            <a href="#" class="btn btn-default web-link">Lien</a>
                            <a href="#" class="btn btn-default web-link">Plus</a>
                        </div>
                </div>
                <!--fin de gcaption-->                       

            </div>
            <!--fin de gellery-inner-->

        </div>
        <!--fin de gellery-->
    </div>
    <!--fin de actualite-->

<!-- ******************************************************************************************************* -->   

    <div class="3coh">
        <div class="heading ">

            <div class="container">
                <div class="row">
                    <div class="col-md-6 text-center">
                        <h1>3COH</h1>

                    </div>

                </div>

            </div>
        <!--fin de actualite-->
        </div>
        <!--fin de heading-->

        <div class="container">
            <div class="row">
                <div id="carousel-3coh" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-3coh" data-slide-to="0" class="active">Présentation</li>
    <li data-target="#carousel-3coh" data-slide-to="1">Comptabilité générale</li>
    <li data-target="#carousel-3coh" data-slide-to="2">Comptabilité budgétaire</li>
    <li data-target="#carousel-3coh" data-slide-to="3">Comptabilité analytique</li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active text-center">
               <div class="row">       
                     <div class="col-md-6">
                            <img src="img/pres.png" alt="présentation"/>
                    </div>

                    <div class="col-md-6">
                          <h4>Présentation</h4>
                            <p>Le système est basé sur l’utilisation du logiciel de gestion intégré « 3COH » (‘triple comptabilité hospitalière). Outre la gestion comptable, ce logiciel assure la prise en charge de tout le système de gestion de l’établissement :
                            Gestion des achats et de la relation fournisseurs,gestion des stocks,gestion des immobilisations,Système de facturation,gestion des consommations,suivi budgétaire ,gestion de la trésorerie,comptabilité générale,comptabilité analytique etats financiers,tableaux de bord.</p>
                    </div>

            </div> <!--fin de 1 item-->
            </div>

            <div class="item text-center">
               <div class="row">       
                     <div class="col-md-6">
                            <img src="img/pres.png" alt="présentation"/>
                    </div>

                    <div class="col-md-6">
                          <h4>Comptabilité générale</h4>
                            <p>Le système est basé sur l’utilisation du logiciel de gestion intégré « 3COH » (‘triple comptabilité hospitalière). Outre la gestion comptable, ce logiciel assure la prise en charge de tout le système de gestion de l’établissement :
                            Gestion des achats et de la relation fournisseurs,gestion des stocks,gestion des immobilisations,Système de facturation,gestion des consommations,suivi budgétaire ,gestion de la trésorerie,comptabilité générale,comptabilité analytique etats financiers,tableaux de bord.</p>
                    </div>

                 </div> <!--fin de 2 item-->
             </div>

             <div class="item text-center">
               <div class="row">       
                     <div class="col-md-6">
                            <img src="img/pres.png" alt="présentation"/>
                    </div>

                    <div class="col-md-6">
                          <h4>Comptabilité budgétaire</h4>
                            <p>Le système est basé sur l’utilisation du logiciel de gestion intégré « 3COH » (‘triple comptabilité hospitalière). Outre la gestion comptable, ce logiciel assure la prise en charge de tout le système de gestion de l’établissement :
                            Gestion des achats et de la relation fournisseurs,gestion des stocks,gestion des immobilisations,Système de facturation,gestion des consommations,suivi budgétaire ,gestion de la trésorerie,comptabilité générale,comptabilité analytique etats financiers,tableaux de bord.</p>
                    </div>

                 </div> <!--fin de 3 item-->
             </div>

             <div class="item text-center">
               <div class="row">       
                     <div class="col-md-6">
                            <img src="img/pres.png" alt="présentation"/>
                    </div>

                    <div class="col-md-6">
                          <h4>Comptabilité analytique</h4>
                            <p>Le système est basé sur l’utilisation du logiciel de gestion intégré « 3COH » (‘triple comptabilité hospitalière). Outre la gestion comptable, ce logiciel assure la prise en charge de tout le système de gestion de l’établissement :
                            Gestion des achats et de la relation fournisseurs,gestion des stocks,gestion des immobilisations,Système de facturation,gestion des consommations,suivi budgétaire ,gestion de la trésorerie,comptabilité générale,comptabilité analytique etats financiers,tableaux de bord.</p>
                    </div>

                 </div> <!--fin de 4 item-->
             </div>
    </div><!--fin de item-->

    <div class="item">
            Comptabilité générale
    </div>
    <div class="item">
            Comptabilité budgétaire
    </div>
    <div class="item">
            Comptabilité analytique
    </div>
  </div>

</div><!--fin de carousel-->
            </div>

        </div>

    </div><!--fin de 3coh-->

    <div class="historique">
        <div class="heading ">

            <div class="container">
                <div class="row">
                    <div class="col-md-6 text-center">
                        <h1>HISTORIQUE</h1>

                    </div>

                </div>

            </div>
        <!--fin de actualite-->
        </div>
        <!--fin de heading-->
        <div class="container">
            <div class="row">
                <div id="carousel-historique" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators visible-lg">
    <li data-target="#carousel-historique" data-slide-to="0" class="active">
        <img src="img/1974.png" alt="logo"/>
    </li>
    <li data-target="#carousel-historique" data-slide-to="1">
        <img src="img/1980.png" alt="logo"/>
    </li>
    <li data-target="#carousel-historique" data-slide-to="2">
        <img src="img/1990.png" alt="logo"/>
    </li>
    <li data-target="#carousel-historique" data-slide-to="3">
        <img src="img/2000.png" alt="logo"/>
    </li>
    <li data-target="#carousel-historique" data-slide-to="4">
        <img src="img/2014.png" alt="logo"/>
    </li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
        <div class="item active text-center">
            <div class="row">
                <blockquote>
                    <p>Notre hopital a passé par des périodes tres fracile jusque mon arrivé haha supermen de veiller au maintien de l’esprit d’initiative et d’assiduité du personnel par des formations continues et l’amélioration du cadre de travail cependant le sérieux et la rigueur sont les mots clés de la bonne gestion en application de la réglementation en vigueur.
                    <cite class="hidden-lg">1974</cite>
                    </p>
                </blockquote>
            </div>   

        </div><!--fin de 1 item-->
        <div class="item text-center">
        <div class="row">
            <blockquote>
                <p>Notre hopital a passé par des périodes tres fracile jusque mon arrivé haha supermen de veiller au maintien de l’esprit d’initiative et d’assiduité du personnel par des formations continues et l’amélioration du cadre de travail cependant le sérieux et la rigueur sont les mots clés de la bonne gestion en application de la réglementation en vigueur.
                    <cite class="hidden-lg">1980</cite>
                </p>
        </blockquote>
        </div>   

    </div><!--fin de 2 item-->
    <div class="item text-center">
        <div class="row">
            <blockquote>
                <p>Notre hopital a passé par des périodes tres fracile jusque mon arrivé haha supermen de veiller au maintien de l’esprit d’initiative et d’assiduité du personnel par des formations continues et l’amélioration du cadre de travail cependant le sérieux et la rigueur sont les mots clés de la bonne gestion en application de la réglementation en vigueur.
                    <cite class="hidden-lg">1990</cite>
                </p>
        </blockquote>
        </div>   

    </div><!--fin de 3 item-->
    <div class="item text-center">
        <div class="row">
            <blockquote>
                <p>Notre hopital a passé par des périodes tres fracile jusque mon arrivé haha supermen de veiller au maintien de l’esprit d’initiative et d’assiduité du personnel par des formations continues et l’amélioration du cadre de travail cependant le sérieux et la rigueur sont les mots clés de la bonne gestion en application de la réglementation en vigueur.
                    <cite class="hidden-lg">2000</cite>
                </p>
        </blockquote>
        </div>   

    </div><!--fin de 4 item-->
    <div class="item text-center">
        <div class="row">
            <blockquote>
                <p>Notre hopital a passé par des périodes tres fracile jusque mon arrivé haha supermen de veiller au maintien de l’esprit d’initiative et d’assiduité du personnel par des formations continues et l’amélioration du cadre de travail cependant le sérieux et la rigueur sont les mots clés de la bonne gestion en application de la réglementation en vigueur.
                    <cite class="hidden-lg">2014</cite>
                </p>
        </blockquote>
        </div>   

    </div><!--fin de 5 item-->

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-historique" data-slide="prev">
    Arrière
  </a>
  <a class="right carousel-control" href="#carousel-historique" data-slide="next">
    Avant
  </a>
</div>
            </div>

        </div>

    </div><!--fin de historique-->
    <div class="contact">
        <div class="container">
            <div class="row">
                <h2>Si vous avez des question .....CONTACTER NOUS</h2>
            </div>

        </div>

    </div><!--fin de conact-->
<div class="contact-info">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                     <div class="location text-center">
                            <span class="icon-sprite sprite-loc"></span>
                            <h6>Adress</h6>
                            <p>DRAA ZIROUNE ARRIS</p>
                     </div>
                </div>
                <div class="col-md-4">
                     <div class="location text-center">
                            <span class="icon-sprite sprite-email"></span>
                            <h6>E-MAIL</h6>
                            <p>3cohfouad@yahoo.fr</p>
                     </div>
                </div>
                <div class="col-md-4">
                     <div class="location text-center">
                            <span class="icon-sprite sprite-phone"></span>
                            <h6>TELEPHONE</h6>
                            <p>033-84-31- 31</p>
                     </div>
                </div>
            </div>

        </div>

    </div><!--fin de conactinfo-->
<footer>
    <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="copyright text-center">
                        <small>© 2014 Copyright WWW.EPHARRIS1.COM</small>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="social-icons text-center">
                        <a href="#"><span class="icon-sprite sprite-facebook"></span></a>
                        <a href="#"><span class="icon-sprite sprite-youtube"></span></a>

                    </div>

                </div>
            </div>

        </div>

</footer><!--fin de footer-->

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/bootstrap.js"></script>

</body>
</html>

style.css 

body{
font-family: 'Raleway', Helvetica, Arial;
font-size: 16px;
color: #666666;
font-weight: 400;
letter-spacing: 1px
}
p{
    line-height: 30px;
    font-weight: 400px;
}
h1;h2,h3,h4,h5,h6{
    color: #333333;
    text-transform: uppercase;
    font-family: 'Raleway', Helvetica, Arial;
    font-weight: 700;

}
a{
    color: #3498db;
    text-decoration: none;
}
a:hover,a:focus{
    color: #308ac6;
}
.btn-default{
    border-radius: 2px;
    border: 1px solid #bdc3c7;
    font-size: 14px;
    color: #95a5a6;
    font-weight: 700;
    text-transform: uppercase;
    padding: 11px 20px;

}
.btn-default:hover{
    background: #fff;
    color: #3498bd;
    border: 1px solid #3498bd;

}
.btn:active{
box-shadow: none;

}
/*fin*/
/* logo*/

.navbar-brand{
    /*width: 179px;
    height: 32px;
    padding: 0;
    margin: 0;
    background: url(img/bg.png) no-repeat;
    text-indent: -9999px;*/

}
.navbar-brand.gr{

    font-size: 22px;
    font-weight: 700;
    color: #3276b1;
}
/*fin logo*/

/*navigateur*/

.navbar-default{
    background: none;
    border: none;
    padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a{
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    color: #95a5a6;
    padding: 11px 0;
    text-align: center;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{
    color: #fff;

}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{
    color: #fff;
    background: none;
    outline: 0;

}
.navbar-toggle{
border: none;
margin-top: 0;
margin-right: 0;
width: 32px;
height: 32px;
text-align: center;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
    background: none;
    outline: none;
}

.navbar-default .navbar-collapse{
    border: none;
    background: rgba(255,255,255,0,05);
    border-radius: 2px;
    box-shadow: none;
}
.jumbotron{
    background: #2c3e50 url('img/banner.jpg') no-repeat top ;
    background-size: 1600px 800px;
    max-height: 800px;
    padding: 60px 0;
    margin: 0;

}
.jumbotron h1{
    color: #fff;
    font-weight: 300;
    margin: 0 0 50px 0;
}
.jumbotron h1 span{
    color: #f39c12;
    font-weight:700;
}
.jumbotron h3{
    color: #95a5a6;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    text-transform: none;
    margin: 0 0 60px 0;
}
.jumbotron h3 span{
    color: #fff;
}
.jumbotron .btn-primary{
    border-radius: 2px;
    border: 1px solid #fff;
    background: rgba(255,255,255,0,05);
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    padding: 16px 30px;
}
.jumbotron .btn-primary:hover{
    background: rgba(255,255,255,0,1); 
}

.services{
    padding: 60px;
    border: 1px solid #e3e3e3;
}
.services h4{
margin-bottom: 30px;

}
.services p{
    margin-bottom: 40px;
}
.services .more{
text-transform: uppercase;
font-weight: 700;
font-size: 13px
}
.services-mg,.services-cg{
    margin-bottom: 60px;
}
.services-mg{
    margin-top: 60px;
}
.icon-sprite{

    width: 36px;
    height: 36px;
    display: inline-block;
    background: url(img/service.png) no-repeat;
    background-position: left top;
    margin-bottom: 20px;
}
.icon-sprite.sprite-mg{
    background-position: top -36px;
}
.icon-sprite.sprite-cg{
    background-position: -36px top;
}
.icon-sprite.sprite-umc{
    background-position: -72px top;
}
/*fin*/
/*actualité*/
.heading {
    padding: 60px 0 ;

}
.heading h1{
    background: url(img/head.png) no-repeat;
    background-position: center bottom ;
    padding: 0 0 20px 0;
    }
    .control-right{
        padding: 60px 0 0 0;
    }
    .gallery{
        background: #2c3e50;
    }
    .gallery-inner img{
        margin: 0;
        padding: 0;
        opacity: 0.6;
    }
    .gallery-inner .caption{
        color: #fff;
    }
    .gallery-inner .caption small{
        color: rgba(255,255,255,0,6);
    }

j n arrive pas a afficher la photo avec le couleur de fond. 

.jumbotron{
    background: #2c3e50 url('img/banner.jpg') no-repeat top ;
    background-size: 1600px 800px;
    max-height: 800px;
    padding: 60px 0;
    margin: 0;

}

3 réponses

Fouad Zaakir
Auteur

J'ai essayé aussi avec

.jumbotron{
    background-color: #2c3e50;
    background-image: url('img/banner.jpg') no-repeat;
    background-size: 1600px 800px;
    max-height: 800px;
    padding: 60px 0;
    margin: 0;

}

même chose.

Fouad Zaakir
Auteur

Non ,voici la photo:

coloo

Soit tu utilises l'écriture rapide :

background: url('http://img15.hostingpics.net/pics/258857banner.jpg') no-repeat top red ;

soit tu dois tout spécifier : 

background : red;
background-image : url();
background-position :;
background-size :;

Tu ne peux pas mettre la notion repeat dans un "background-image".
Isoles ta div dans un index vide et fais des test. Il peut y avoir un problème d'url d'image, de la taille de la div. Un max-height ne stipule pas la taille de la div. On utilise souvent les max height ou width pour une notion de responsive. ex : je donne a ma div un width:80% mais je lui indique qu'il ne pourra pas avoir une largeur inférieur a 400 (min-width:400px;)

Bonne journée.