Comment faire pour modifier la Sémantique de l'INTERFACE utilisateur de l'image de fond

<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Home | Dr.PRB</title>
<link  type="text/css" href="../dist/components/reset.css">
<link  type="text/css" href="../dist/components/site.css">
<link  type="text/css" href="../dist/components/container.css">
<link  type="text/css" href="../dist/components/grid.css">
<link  type="text/css" href="../dist/components/header.css">
<link  type="text/css" href="../dist/components/image.css">
<link  type="text/css" href="../dist/components/menu.css">
<link  type="text/css" href="../dist/components/divider.css">
<link  type="text/css" href="../dist/components/dropdown.css">
<link  type="text/css" href="../dist/components/segment.css">
<link  type="text/css" href="../dist/components/button.css">
<link  type="text/css" href="../dist/components/list.css">
<link  type="text/css" href="../dist/components/icon.css">
<link  type="text/css" href="../dist/components/sidebar.css">
<link  type="text/css" href="../dist/components/transition.css">
<style type="text/css">
.hidden.menu {
display: none;
}
.masthead.segment {
min-height: 700px;
padding: 1em 0em;
}
.masthead .logo.item img {
margin-right: 1em;
}
.masthead .ui.menu .ui.button {
margin-left: 0.5em;
}
.masthead h1.ui.header {
margin-top: 3em;
margin-bottom: 0em;
font-size: 4em;
font-weight: normal;
}
.masthead h2 {
font-size: 1.7em;
font-weight: normal;
}
.ui.vertical.stripe {
padding: 8em 0em;
}
.ui.vertical.stripe h3 {
font-size: 2em;
}
.ui.vertical.stripe .button + h3,
.ui.vertical.stripe p + h3 {
margin-top: 3em;
}
.ui.vertical.stripe .floated.image {
clear: both;
}
.ui.vertical.stripe p {
font-size: 1.33em;
}
.ui.vertical.stripe .horizontal.divider {
margin: 3em 0em;
}
.quote.stripe.segment {
padding: 0em;
}
.quote.stripe.segment .grid .column {
padding-top: 5em;
padding-bottom: 5em;
}
.footer.segment {
padding: 5em 0em;
}
.secondary.pointing.menu .toc.item {
display: none;
}
@media only screen and (max-width: 700px) {
.ui.fixed.menu {
display: none !important;
}
.secondary.pointing.menu .item,
.secondary.pointing.menu .menu {
display: none;
}
.secondary.pointing.menu .toc.item {
display: block;
}
.masthead.segment {
min-height: 350px;
}
.masthead h1.ui.header {
font-size: 2em;
margin-top: 1.5em;
}
.masthead h2 {
margin-top: 0.5em;
font-size: 1.5em;
}
}
</style>
<script src="assets/library/jquery.min.js"></script>
<script src="../dist/components/visibility.js"></script>
<script src="../dist/components/sidebar.js"></script>
<script src="../dist/components/transition.js"></script>
<script>
$(document)
.ready(function() {
//fix menu when passed
$('.masthead')
.visibility({
once: false,
onBottomPassed: function() {
$('.fixed.menu').transition('fade in');
},
onBottomPassedReverse: function() {
$('.fixed.menu').transition('fade out');
}
})
;
//create sidebar and attach to menu open
$('.ui.sidebar')
.sidebar('attach events', '.toc.item')
;
})
;
</script>
</head>
<body>
<!-- Following Menu -->
<div class="ui large top fixed hidden menu">
<div class="ui container">
<div class="header item">
<img src="assets/images/dentlogo.png" class="logo">
</div>
<a class="active item">Home</a>
<a class="item" href="services.html">Services</a>
<a class="item">FAQ</a>
<a class="item">About Me</a>
<a class="item" href="contact.html">Contact</a>
</div>
</div>
<!-- Sidebar Menu -->
<div class="ui vertical inverted sidebar menu">
<div class="header item">
<img src="assets/images/dentlogo.png" class="logo">
</div>
<a class="active item">Home</a>
<a class="item" href="services.html">Services</a>
<a class="item">FAQ</a>
<a class="item">About Me</a>
<a class="item" href="contact.html">Contact</a>
</div>
<!-- Page Contents -->
<div class="ui inverted vertical masthead center aligned segment" background="assets/images/dentistplace.jpg">
<div class="ui container">
<div class="ui large secondary inverted pointing menu">
<a class="toc item">
<i class="sidebar icon"></i>
</a>
<div class="header item">
<img src="assets/images/dentlogo.png" class="logo">
</div>
<a class="active item">Home</a>
<a class="item" href="services.html">Services</a>
<a class="item">FAQ</a>
<a class="item">About Me</a>
<a class="item" href="contact.html">Contact</a>
</div>
</div>
<div class="ui text container">
<h1 class="ui inverted header">
Imagine-a-Company
<img src="">
</h1>
<h2>Do whatever you want when you want to.</h2>
<div class="ui huge primary button">Get Started <i class="right arrow icon"></i></div>
</div>
</div>
<div class="ui vertical stripe segment" >
<div class="ui middle aligned stackable grid container">
<div class="row">
<div class="eight wide column">
<h3 class="ui header">We Provide Quality Services</h3>
<p>We assure you the highest quality of dental treatment plan with the right and best equipments in the field of dentistry. We treat our customers with satisfaction serving them great food and beverages while waiting for their appointment.</p>
<h3 class="ui header">We Value Our Patients</h3>
<p>We always listen to our patients concern, and perform the highest quality of diagnostic procedure in order to provide the best quality of treatment for their needs.</p>
</div>
<div class="six wide right floated column">
<img src="assets/images/dentistplace.jpg" class="ui large bordered rounded image">
</div>
</div>
<div class="row">
<div class="center aligned column">
<a class="ui huge button" href="services.html">Check Them Out</a>
</div>
</div>
</div>
</div>
<div class="ui vertical stripe quote segment">
<div class="ui equal width stackable internally celled grid">
<div class="center aligned row">
<div class="column">
<h3>"They keep their promise in giving the quality of service."</h3>
<p>Anonymous</p>
</div>
<div class="column">
<h3>"If not the best. One of the best!"</h3>
<p>
<img src="assets/images/avatar/tom.jpg" class="ui avatar image"> <b>Mark Acdan</b> 3rd Year Computer Science Student
</p>
</div>
</div>
</div>
</div>
<div class="ui vertical stripe segment">
<div class="ui text container">
<h3 class="ui header">Different types of Dental Fillings</h3>
<p>You are maybe know that there are only one type of dental filling and that is mostly termed as <b>'Pasta'</b>. But did you know that there are various types of dental fillings? Check it out now!</p>
<a class="ui large button">Read More</a>
<h4 class="ui horizontal header divider">
<a href="#">Trivias</a>
</h4>
<h3 class="ui header">Types of Braces</h3>
<p>Yes I know you probably heard about braces because they're quite the trend now these days. But did you know that there are different of braces that depends on the case of the patient.</p>
<a class="ui large button">Read More</a>
</div>
</div>
<div class="ui inverted vertical footer segment">
<div class="ui center aligned container">
<div class="ui stackable inverted divided grid">
<div class="three wide column">
<h4 class="ui inverted header">About</h4>
<div class="ui inverted link list">
<a href="#" class="item">Site Map</a>
<a href="#" class="item">Services</a>
<a href="#" class="item">FAQ</a>
<a href="#" class="item">Developers</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">Services</h4>
<div class="ui inverted link list">
<a href="#" class="item">Tooth Extraction</a>
<a href="#" class="item">Airway and Dental Sleep Medicine</a>
<a href="#" class="item">Craniofacial Pain</a>
<a href="#" class="item">TMJ Dysfunctional Management</a>
</div>
</div>
<div class="ten wide column">
<center>
<h4 class="ui inverted header">Dr. Pamela B. Rivera</h4>
<p>Specialized in Airway and Dental Sleep Medicine | Craniofacial Pain | TMJ Dysnfunctional Management</p>
</center>
</div>
</div>
<div class="ui inverted section divider"></div>
<img src="assets/images/dentlogo.png" class="ui centered mini image">
<div class="ui horizontal inverted small divided link list">
<a class="item" href="#">Site Map</a>
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Terms and Conditions</a>
<a class="item" href="#">Privacy Policy</a>
</div>
</div>
</div>
</div>
</body>
</html>

Donc je suis de nouveau à la Sémantique de l'INTERFACE utilisateur et je suis en train d'expérimenter la page d'Accueil et je veux changer l'image de fond de l'un noir qui est sur le dessus.
Pas la barre de navigation mais le tout noir tout comme toute chose dans la Sémantique de l'INTERFACE utilisateur du site web. J'espère que vous pourrez m'aider!

OriginalL'auteur Christian. | 2015-10-09

  1. 3

    Supprimer background="assets/images/dentistplace.jpg" de <div class="ui inverted vertical masthead center aligned segment"

    Ajouter landing-image pour que le div de la liste des styles. landing-image est un nom de classe que vous pouvez nommer tout ce que vous voulez.

    Dans votre page styles de définir les landing-image classe. Vous pouvez le mettre en avant .masthead.segment {

    Définir landing-image comme suit:

    .landing-image {
background-image: url('assets/images/dentistplace.jpg') !important;
background-size: cover !important;
}

    OriginalL'auteur khornberg

  2. 1

    Ne pas utiliser le <img src="yourimage.jpg /> dans votre tête de mât. Ajoutez simplement ce code entre les balise style

    .masthead {
background-image: url('bg.jpg') !important;
background-size: cover !important;
}

    Cela vous aidera à!

    OriginalL'auteur karansanjeev