Menu
<!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 rel="stylesheet" type="text/css" href="../dist/components/reset.css">
<link rel="stylesheet" type="text/css" href="../dist/components/site.css">
<link rel="stylesheet" type="text/css" href="../dist/components/container.css">
<link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
<link rel="stylesheet" type="text/css" href="../dist/components/header.css">
<link rel="stylesheet" type="text/css" href="../dist/components/image.css">
<link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
<link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
<link rel="stylesheet" type="text/css" href="../dist/components/dropdown.css">
<link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
<link rel="stylesheet" type="text/css" href="../dist/components/button.css">
<link rel="stylesheet" type="text/css" href="../dist/components/list.css">
<link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
<link rel="stylesheet" type="text/css" href="../dist/components/sidebar.css">
<link rel="stylesheet" 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>
So I'm new to Semantic UI and I'm experimenting with the Homepage and I want to change the background image of the black one that is on the top. Not the navbar but the whole black just like the whole thing in Semantic UI website. Hope you can help me!
489
Delete background="assets/images/dentistplace.jpg" from <div class="ui inverted vertical masthead center aligned segment"
Add landing-image to that div's list of styles. landing-image is a class name that you can name anything you want.
In your page styles define the landing-image class. You can put it before .masthead.segment {
Define landing-image like so:
.landing-image {
background-image: url('assets/images/dentistplace.jpg') !important;
background-size: cover !important;
}
Dont't use the <img src="yourimage.jpg /> in your masthead. Simply add this following code between the style tag
.masthead {
background-image: url('bg.jpg') !important;
background-size: cover !important;
}
This will help you!
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
