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.
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%;
}
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?
I want to have a background image to fill the entire width of the screen (not the height though) like on these websites: http://www.rokivo.com/ and
https://teemo.gg/
My current structure looks like this:
<header class="navbar navbar-default" role="navigation">
<div class="container">
Code for header
</div>
</header>
<div class="container">
Rest of page contents here
</div>
Am I going to have to wrap everything else in a div with class container and use that to specify the background-image? Or is there another way I can do this?
You could do something like the following:
HTML:
<header class="navbar navbar-default" role="navigation">
<div class="header-content">
Code for header
</div>
</header>
<div class="container">
Rest of page contents here
</div>
CSS:
header {
width: 100%;
background: url(https://unsplash.it/2000/1000/?blur) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header-content {
padding: 5em 0;
font-size: 2em;
text-align: center;
}
So what's going on here? The wrapping header has a width of 100% in order to cover the entire width of the screen and has a background image as well. Also, it's set to no-repeat and centered vertically/horizontally, as well as background-size set to cover to allow as much of the image to show as possible.
On the .header-content, a padding is added to the div so that it is vertically centered.
The padding, text size, etc can be adjusted, but this should give you a general idea of how this effect is accomplished.
To see it in action, see this codepen.
you can do something simple like:
<header>
<nav class="navbar navbar-default" role="navigation">
<!-- nav stuff -->
</nav>
<div class="main-container">
Code for header
</div>
</header>
<div class="container">
Rest of page contents here
</div>
.main-container {
background: url(htts://someimage.com/1.jpg) no-repeat center center;
background-size: cover;
width: 100%;
height: auto; // or like the teemo site - height: 500px;
}
here's a good read on CSS-Tricks
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