Jumbtron full image in background
I am trying to make my image full-time in jumtron, unfortunately I still haven't figured out what I am doing wrong, can you check? The image seems to be cropped somehow and doesn't look very good:
How it looks now:
Code where my jumbotron is (at the end):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Logo</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<style>
body{
padding-top: 40px;
}
</style>
<body data-spy="scroll" data-target="#my-navbar">
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">My logo</a>
</div><!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<!--<a href="" class="btn btn-warning navbar-btn navbar-right">Download Now</a>-->
<ul class="nav navbar-nav">
<li><a href="#feedback">Feedback</a>
<li><a href="#gallery">Gallery</a>
<li><a href="#features">Features</a>
<li><a href="#faq">Faq</a>
<li><a href="#contact">ContactUs</a>
</ul>
</div>
</div><!-- End Container-->
</nav><!-- End navbar -->
<!-- jumbotron-->
<div class="jumbotron">
<div class="container">
</div><!-- End container -->
</div><!-- End jumbotron-->
And my custom.css where I am trying to achieve this:
.jumbotron
{
position: relative;
background: #000 url("1.png") center center;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
as per @potatopeelings change looks like this:
According to @Shirin:
source to share
With the bootstrap you linked to, I think you need to fill more at the top.
Edit
body{
padding-top: 40px;
}
to
body{
padding-top: 50px;
}
and your image won't be cropped at the top.
For any other distortions you see, you might want to check your image ( background-size: cover;
will stretch your image to cover the entire element, so if your image does not have the same aspect ratio, i.e. width x height, as your element, it will look distorted)
source to share
OK, I have a solution for this question, this is the answer:
.jumbotron {
position: relative;
background: #000 url('1 - Copy.png') center center no-repeat;
width: 100%;
background-size: cover;
overflow: hidden;
height: 250px;
}
Additional question: how in custom.css I have defined my own jumbotron css - but imageine, which for example I would define css for a table - then all tables will have this css - the question is how to use the ovverite table, but only for specific table i want like with id i mean not to override it so that everything that uses tables in my website has this custom css. How to do it?
source to share