I have a one page scrolling site using bootstrap. In the header section there is a logo image that is supposed to stay centered at the bottom of the section. However the image consistently stays at the top
HTML:
<header>
<a class="page-scroll" href="#about">
<div class="logo container"> <img src="img/logo_black.png" alt="logo"></div>
</a>
</header>
CSS:
header {
position:relative;
text-align: center;
background-attachment: scroll;
background-image: url(../img/me.png);
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
}
.logo {
position: absolute;
bottom: 0;
}
Harry Robinsob, Here is a Fiddle of your code.
As you had it in the fiddle the logo was stuck to the bottom, it was not centered.
With a little change it is now center.
.logo {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Here is a link to start your own fiddle.
Sign up to have your own.
Here is a youtube video for a Introduction to jsFiddle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
header {
position:relative;
text-align: center;
background-attachment: scroll;
background-image: url('http://img1.goodfon.su/original/1920x1080/b/b3/soty-pchela-med-fon-nasekomoe.jpg');
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
}
.logo {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<header>
<a class="page-scroll" href="#about">
<div class="logo container">
<img src="https://saasu.com/media/assets/Saasu-Logo-RGB-Black-400px.png" alt="logo">
</div>
</a>
</header>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Related
I have successfully added a "background-image" to my Razor Pages application.
Now, when using "filter: blur(2px);" the header and footer blur, but not the image.
I've been at this for hours, saw tons of threads on how to add the image, but couldn't find a way to do this properly (the blur), or see someone else experiencing the same behavior.
My _Layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - LifeCompanion</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/LifeCompanion.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm bg-transparent border-bottom box-shadow mb-3">
<div class="container">
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
LifeCompanion
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>
<a class="dropdown-item" type="button" asp-page="/LActions/ImageManagement">
Images!
</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - LifeCompanion - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
My CSS - using site.css to apply changes globally - is:
html {
font-size: 14px;
width: 100%;
height: 100%;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
}
So far so good.
Now when adding to my css:
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
filter: blur(2px);
}
The footer and header blurs, but not the background-image as anticipated.
Replace filter: blur(2px); with backdrop-filter: blur(2px);.
filter will affect the element itself, and backdrop-filter will affect the elements beneath the element within the bounding box of the element.So in your project, you need to use backdrop-filter. You can follow this link to learn more about backdrop-filter.
I'm making a single page scrollable website and want to have the first page to be just a navbar, image, and a header. Now the problem is that I was unable to center the header. Well, at least I got it to center horizontally. But I'm unable to center it vertically. I hope somebody can spot the issue because I've been puzzling this annoying issue for hours.
This: https://startbootstrap.com/previews/grayscale/ is the idea I'm going for, to make it clear.
Here is the code
/*body {
background: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85));
background-image: url("Background_photo_2.jpg");
background-size: cover;
box-shadow: 4056 3000px rgba(0, 0, 0, 0) inset;
/* Center and scale the image nicely
background-position: center;
background-repeat: no-repeat;
height: 50%;
}*/
nav {
font-size: medium;
}
.nav-item a{
color: white !important
}
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
/*styles background image*/
.bg-img {
/*background-image: url("Background_photo_2.jpg");*/
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
}
/* use this to change the general fonts */
p, h1 {
color: white;
}
/* arranges navbar items to right */
ul {
margin-left: auto;
}
.bg-img.container {
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
/*.container-fluid {
width: 70%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Both Sides Now </title>
<!-- BOOTSTRAP CDN IMPLEMENTATION-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Links to the stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<!--This is the navbar-->
<div class="container col-md-10">
<nav class="navbar transparant navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="masthead d-flex h-100 justify-content-center">
<div class="container ">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</div>
</html>
nav {
font-size: medium;
}
.nav-item a {
color: white !important
}
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
/*styles background image*/
.bg-img {
/*background-image: url("Background_photo_2.jpg");*/
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
}
/* use this to change the general fonts */
p,
h1 {
color: white;
}
/* arranges navbar items to right */
ul {
margin-left: auto;
}
.bg-img.container {
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
/*.container-fluid {
width: 70%;
} */
.mx-auto {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Both Sides Now </title>
<!-- BOOTSTRAP CDN IMPLEMENTATION-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Links to the stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<!--This is the navbar-->
<div class="container col-md-10">
<nav class="navbar transparant navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="masthead d-flex h-100 justify-content-center">
<div class="container">
<div class="mx-auto text-center">
<h1 class="my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</div>
</html>
No need to use styles. Bootstrap does it for you :
<header class="row align-items-center masthead d-flex h-100 justify-content-center">
<div class="container ">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
Add two classes to header div that I have added above.
Note : after you added row class maybe you have to add col to your content elements.
There is two option to do vertical center
you need to give the position to your navigation bar so it does not calculate in flexbox, for that you need to change your code a little bit.
you need to cut out your navigation bar height from your page, so it does not calculate in flexbox, I calculated your navbar height and its equal to 86px so, I will cut 172px from your page
Now you need to choose best way, from my side, first is better than second.
1st Idea
Just added align-items-center vh-100 in masthead class tag and added CSS
.bg-img > .container {
position: fixed;
top: 0;
left: 0;
right: 0;
}
/*body {
background: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85));
background-image: url("Background_photo_2.jpg");
background-size: cover;
box-shadow: 4056 3000px rgba(0, 0, 0, 0) inset;
/* Center and scale the image nicely
background-position: center;
background-repeat: no-repeat;
height: 50%;
}*/
nav {
font-size: medium;
}
.nav-item a{
color: white !important
}
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
/*styles background image*/
.bg-img {
/*background-image: url("Background_photo_2.jpg");*/
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
}
/* use this to change the general fonts */
p, h1 {
color: white;
}
/* arranges navbar items to right */
ul {
margin-left: auto;
}
.bg-img.container {
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
/*.container-fluid {
width: 70%;
}*/
.bg-img > .container {
position: fixed;
top: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Both Sides Now </title>
<!-- BOOTSTRAP CDN IMPLEMENTATION-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Links to the stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<!--This is the navbar-->
<div class="container col-md-10">
<nav class="navbar transparant navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="masthead d-flex vh-100 align-items-center justify-content-center">
<div class="container ">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</div>
</html>
2nd Idea
Just added align-items-center in masthead class tag and added CSS
.masthead {
height: calc(100vh - 172px);
}
/*body {
background: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85));
background-image: url("Background_photo_2.jpg");
background-size: cover;
box-shadow: 4056 3000px rgba(0, 0, 0, 0) inset;
/* Center and scale the image nicely
background-position: center;
background-repeat: no-repeat;
height: 50%;
}*/
nav {
font-size: medium;
}
.nav-item a{
color: white !important
}
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
/*styles background image*/
.bg-img {
/*background-image: url("Background_photo_2.jpg");*/
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 4000px 3000px rgba(0, 0, 0, 0.6) inset;
}
/* use this to change the general fonts */
p, h1 {
color: white;
}
/* arranges navbar items to right */
ul {
margin-left: auto;
}
.bg-img.container {
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
/*.container-fluid {
width: 70%;
}*/
.masthead {
height: calc(100vh - 172px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Both Sides Now </title>
<!-- BOOTSTRAP CDN IMPLEMENTATION-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Links to the stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<!--This is the navbar-->
<div class="container col-md-10">
<nav class="navbar transparant navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html"><img src="logotransparant.gif" class="d-inline-block align-top" width="60" height="60"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
<header class="masthead d-flex align-items-center justify-content-center">
<div class="container ">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Grayscale</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A free, responsive, one page Bootstrap theme created by Start Bootstrap.</h2>
Get Started
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</div>
</html>
I'm using React-Bootstrap and trying to accomplish this: transparent navbar
I want the navbar to be full width while the banner with image + text on top should be 80% and centered. I believe I can't make it the background image in this case, as I'm not sure how I'd make the container 80% width while keeping the navbar 100%.
For example this code also shrinks the menu:
<div className="jumbo">
<MyNavbar />
<h1>text</h1>
</div>
in style.css:
.jumbo {
background-image: url("img.jpg");
background-size: cover;
text-align: center;
width: 80%;
}
Considering I'm trying to make a responsive website, is it bad practice if I did something like this:
<MyNavbar />
<Image src="img.jpg" id="img">
in style.css:
#img {
top: -200px;
}
Is there an alternative? Thanks!
Try this.
#top-header {
background: rgba(255, 0, 0, 0.36);
position: fixed;
left: 0;
right: 0;
top: 0;
}
.w100 {
width:80%;
margin:0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Code!</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<header class="bs-docs-nav navbar navbar-static-top" id="top-header">
<div class="container">
<div class="navbar-header">
<button aria-controls="bs-navbar" aria-expanded="false" class="collapsed navbar-toggle" data-target="#bs-navbar" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootstrap
</div>
<nav class="collapse navbar-collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>
Getting started
</li>
<li>
CSS
</li>
<li class="active">
Components
</li>
<li>
JavaScript
</li>
<li>
Customize
</li>
</ul>
</nav>
</div>
</header>
<div class="page-inner">
<div class="img-section text-center">
<img src="http://getbootstrap.com/assets/brand/bootstrap-social.png" class="img-responisve w100">
</div>
</div>
<div class="container">
<h2 class="bs-docs-featurette-title">Premium Bootstrap Themes</h2>
<p class="lead">Take Bootstrap 4 to the next level with premium themes from our official marketplace—all built on Bootstrap with new components and plugins, docs, and build tools. </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
You can make use of background-position and background-size to get the job done. You will have to style the text separately, so that the element and its text is centered.
.jumbo {
background-image: url("http://theartmad.com/wp-content/uploads/2015/09/Best-Desktop-Background-1.jpg");
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
}
.navbar {
background-color: rgba(226, 183, 226, 0.5);
}
h1 {
text-align: center;
width: 80%;
/* margin:auto so that the div is centered */
margin: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="jumbo">
<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<h1>text</h1>
</div>
I'm using Bootstrap to make my custom website but I have a problem. I have a big space between my banner and my navigation bar. I need to remove it without breaking the anything else.
I was searching for fix on this website and on other websites too, but none of those are working. Here's the code:
HTML: http://pastebin.com/FSFA4GhG CSS: http://pastebin.com/TiQ1nm9h
I figured out that the problem is in the <header> somewhere, but I cannot fix it/find that error.
You have the header set at 100px (the navbar default is min-height: 50px) and change the top property on the banner id as well to 50px
Sidenote: you have 2 separate IDs set on your navbar-collapse div causing the mobile nav to not work correctly.
See example Snippet.
body,
div,
h1,
h2,
p {
margin: 0;
padding: 0;
}
body {
text-align: left;
}
header {
height: 50px;
width: 100%;
background: #f00;
z-index: 50;
position: fixed;
display: inline-block;
padding: 0;
}
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 50px;
background: #AE1;
}
#content {
width: 100%;
position: relative;
top: 400px;
background: #ebe;
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="container">
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MENU</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">gg 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>11
</li>
<li>12
</li>
</ul>
</li>
<li>gg2
</li>
<li>gg 3
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="banner">
<h2>BANNER</h2>
</div>
<div id="content">
<p>
CONTENT
</p>
</div>
</div>
It's simple, just remove the height property from your #header and put a correctly top property on your #banner (same that your nav height):
body, div, h1, h2, p{
margin: 0;
padding: 0;
}
body{
text-align: left;
}
header{
width: 100%;
z-index: 50;
position: fixed;
display: inline-block;
}
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 50px;
background: #AE1;
}
#content {
width: 100%;
position: relative;
top: 400px;
background: #ebe;
height: 1000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fred WEB</title>
<!--Zobrazenie pre mobily-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--Pridanie JQuery a Boostrapu-->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
</head>
<body>
<div id="container">
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MENU</a>
</div>
<div id ="menu" class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">gg 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>11</li>
<li>12</li>
</ul>
</li>
<li>gg2</li>
<li>gg 3</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="banner">
<h2>BANNER</h2>
</div>
<div id="content">
<p>
CONTENT
</p>
</div>
</div>
</body>
</html>
try to add
nav {
margin: 0px !important;
}
And to edit banner rule
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 50px;
background: #AE1;
}
I am trying to make my #home background image to be responsive so when I resize my browser or see it through my mobile it should be responsive please tell me how do I do this? as you can see when I resize my browser the background image does not cover the complete browser.
and on the right side there is white space which means the background image does not stretch to cover the whole section
I hope you understand.
here is my code
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/jumbotron.css" rel="stylesheet">
<!-- Style Sheet -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" id="main-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar" >
<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" href="/"></a>
</div><!--navbar-header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div><!--navbar-collapse-->
</div><!--container-->
</div><!--navbar-->
</div><!--navbar-wrapper -->
<!-- Home -->
<section id="home">
<div class="col-sm-7 hero-text">
<h1>I'm <span>Ali</span></h1>
<p class="subtitle">Front End Developer | Web Designer | SEO Specialist</p>
<ul id="social-icons">
<li><i class="fa fa-facebook fa-2x"></i></li>
<li><i class="fa fa-twitter fa-2x"></i></li>
<li><i class="fa fa-google-plus fa-2x"></i></li>
</ul>
</div>
</section>
<footer>
<p>© Muhammad Ali</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.11.3/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
and CSS
#import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
/*Header*/
body {
margin-top: 50px;
font-family: 'proxima-nova', 'Raleway', Helevetica, sans-serif;
font-size: 16px;
background: url('../img/tile.jpg') top left repeat;
}
#home {
background: url('http://cookusart.com/images/2/images-background/images-background-02.jpg') 50% 0 repeat fixed;
min-height: 500px;
padding: 40px 0;
}
.hero-text {
text-transform: uppercase;
}
.hero-text h1{
position: relative;
top: 20px;
}
.hero-text h1 span {
color: #FBB829;
}
.subtitle {
padding: 15px 25px;
border: 2px solid black;
text-transform: uppercase;
font-size: 18px;
color: black;
font-weight: 250;
letter-spacing: 0.3em;
margin-right: 25px;
display:inline-block;
position:relative;
left:600px;
top: 20px;
transform: translateX(-50%);
}
Thanks for the help
You can use the background-size: cover css attribute. So it would go on your #home selector like this.
#home {
background: url('http://cookusart.com/images/2/images-background/images-background-02.jpg') no-repeat center center fixed;
background-size: cover;
min-height: 500px;
padding: 40px 0;
}
See this for reference https://css-tricks.com/perfect-full-page-background-image/
Try this:
#home {
min-height: 500px;
padding: 40px 0;
background-image: url("http://cookusart.com/images/2/images-background/images-background-02.jpg");
background-repeat: no-repeat;
background-position: center center; /* center the image */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}