A basic full browser parallax background image can be achieved relatively simply with the following:
<div class = "parallax">
<!--image here -->
</div>
.parallex{
background: url(*url*);
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
I have attempted to put grid items inside the .parallax div and set individual background-image values on those:
<div class = "parallax">
<div id = "img1">
</div>
<div id = "img2">
</div>
<div id = "img3">
</div>
<!--etc-->
</div>
.parallex{
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
#image1{
background-image: url(*url1*);
}
#image2{
background-image: url(*url2*);
}
but that did not work. Any suggestions?
Related
I am currently trying to code a frontpage according this design, using bootstrap 5. I've managed to set the background to cover the entire page. However, I can't seem to get the white transparent overlay-block right, and the placing of the content inside. This should also be responsive according to this design.
Whats the best solution for doing this?
Currently I've got:
Startpage html
<div class="startpage">
<div class="hero">
<div class="container">
<div class="row">
<div class="col-md-7 offset-md-1">
<h1 class="pb-2 pb-md-4">Heading Title</h1>
<button class="btn btn-primary mt-3" type="button">Button Title</button>
</div>
</div>
</div>
</div>
</div>
Startpage css
.startpage {
height: 100vh;
background: url(URL HERE);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.hero {
background-image: linear-gradient(rgba(250, 250, 250, 0.95), rgba(255, 255, 255, 0.8));
min-height: 70%;
padding-top: 200px;
}
On the navbar I've got:
header {
position: absolute;
width: 100%;
}
image1
My background image don't load! Can anyone tell what's happening? Is it because of gatsby? Should I use gatsby-image instead?
background-image: url('/src/components/images/header.png');
background-size: cover;
background-position: center;
width: 100%;
}
<div id="page">
<div className='header'>
<h1>Header</h1>
</div>
<div>
<h1>About</h1>
</div>
<div>
<h1>Projects</h1>
</div>
</div>
We don't really have your code so we don't know which code you are using. But we do know which code does work and it is the following:
.header {
background-image: url("https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1");
background-size: cover;
background-position: center;
width: 100%;
}
<div class="header">
<h1>Header</h1>
</div>
The main difference perhaps is that in the CSS I use double quotation marks.
within body I have sections...I expected body to get the whole height: section1.height+section2.height+... but it only gets the top sections height.what am I missing? jsfiddle
<!-- Header -->
<section id="top">
<div class="container">
<div class="row">
<div class="col-lg-12">header</div>
</div>
</div>
</section>
<!--mission-->
<section id="mission" class="mission">
<div class="container">
<div class="row">
<div class="col-lg-12">mission</div>
</div>
</div>
</section>
<!-- contact -->
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">contact</div>
</div>
</div>
</section>
You are looking for min-height on your html and body. Using height: 100% makes the html and body height wrap around all of your content up to the height of the screen/viewport. Using min-height: 100% makes the html and body height equal at least the height of the screen/viewport, and can also expand downward to fit overflowing content.
JSFiddle
html, body {
min-height: 100% !important;
width: 100% !important;
margin: 0;
padding: 0;
}
NOTE - Try to avoid using !important unless it is absolutely necessary. It will create problems down the road if/when you need to override the styling on something for a single page.
You can set your header section.top to the viewport height by using 100vh. Then you can remove the height: 100% of html and body, and they will stay fluid (fiddle):
html,body{
margin:0;
padding:0 ;
}
#top {
width: 100%;
height: 100vh;
background: #802818;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
I have two Jumbotrons in one row, but can't figure out how to center the row on the page. I'm assuming it's some simple CSS that I'm missing. Any suggestions for me?
HTML:
<div class="container">
<div class="row">
<div class="well-lg">
<div class="one">
<div class="col-xs-6">
<div class="jumbotron text-center">
Button
</div>
</div>
</div>
<div class="two">
<div class="col-xs-6">
<div class="jumbotron text-center">
Button
</div>
</div>
</div>
</div>
</div>
</div>
My current CSS shouldn't be messing with it but I'll post it anyway.
.one .jumbotron
{ background: url("IMG") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
min-width: 220px;
max-width:240px;
height:290px;
}
.two .jumbotron
{ background: url("IMG") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
min-width: 220px;
max-width:240px;
height:290px;
}
This is the simple exapmple of two jumbotrons:
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-xs-6">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
<div class="col-xs-6">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
</div>
</div>
</div>
Solution 1: If I understood what you're trying to achieve here correctly, you want to remove the max-width value from your .jumbotron class entirely, just keep it at 100%.
In order to size the jumbotron, you can adjust the padding in classes .one and .two to achieve a centered jumbotron.
Doing so, however, would be recommended to also switch up the place of your classes. Put .one and .two class divs in your HTML inside the columns to avoid unnecessary column padding.
Solution 2: If you would rather keep your max-width setup on .jumbotron, you can adjust the margin for your .one and .two classes. Just use margin: 0 auto; and it should center anything inside of it.
In this case, you should also switch up your custom class placing like I told on the first solution.
I hope this helps!
Style your container class:
Add this code into your css file.
.container{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
}
check fiddle: http://codepen.io/anon/pen/EPeLjV
my background image is not showing. Here's the CSS:
.banner {
height: 25em;
width: 100%;
background: #F0F3F7 url("images/Dog_02.jpg");
background-size: cover;
}
Here's the HTML:
<article class = "section group">
<section class = "banner col span_8_of_8">
The background color does show up but the image does not. I've checked the Developer Tools in Google Chrome. It lists no errors.
i try this demo working please try, your problems is not putting the correct path to the url for the background image
.banner {
height: 25em;
width: 100%;
background:url("images/Desert.jpg");
background-size: cover;
}
// your body portion
<article class = "section group">
<section class = "banner col span_8_of_8">
</section>
</article>