I'm creating a half-page background image on my HTML and under the image I have scrollspy with a navbar. I wanted to have that navbar fixed on that certain position (not fixed-top or fixed-bottom)
half-page bg image
When i set it to position: fixed, the navbar is all over the page
position: fixed
When i set to sticky this happens
position: sticky
CSS Code
html {
scroll-behavior: smooth;
}
body, html {
height: 100%;
margin: 0%;
}
.landingImage {
height: 50%;
margin: 0%;
background-image: url("image/bgimage.jpeg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/*ID of the nav element*/
#stick {
position: sticky;
top: 20px;
overflow: hidden;
}
I'm a newbie to this. Thanks.
I think this could work
#stick {
position: fixed;
top: 20px;
overflow: hidden;
width: 100%;
height: 100px; /* for height you can use any value */
}
Related
How can I ensure that an image is dynamically sized always has it's top edge flush with the top edge of its containing div?
As you can see in the screenshot below, the image is currently being shifted down from the top edge, which causes its position do differ from the overlaid canvas.
https://imgur.com/a/hjxbclD
NOTE: I have not been able to replicate the behavior in codepen, will update this whenever I get it
codepen example
#image-viewer {
position: absolute;
top: 89px;
left: 0;
height: calc(100vh-89px);
width: 100%;
overflow-y: auto;
overflow-x: hidden;
// ...
#main-image-slider {
position: relative;
top: 0;
height: calc(100% - 34px);
float: none;
overflow-y: hidden;
overflow-x: hidden;
object-fit: contain;
.slide {
display: none;
max-height: 100%;
width: auto;
// ...
.canvas {
position: absolute;
top: 0;
left: 0;
}
.crop-image-wrapper {
text-align: center;
max-height: calc(100% - 108px);
img {
height: calc(100vh - 108px);
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
}
}
}
}
Thank you in advance for your help!
It turns out object-fit has it's own positioning setting with object-position. Adding object-position: top to the img element did the trick!
I have 3 sections that their parents is only the body, section 2 (menu) background in this case is larger than 100vh. Giving the height:auto; won't work, I would like to stretch the height of the section according to the background length ( auto ), I don't want to give it a specific value using ( px, vh, cm, ... etc). I'm pretty sure it's simple answer but I couldn't figure it out my self. Thank you
html,body {
position: relative;
background: white;
margin: 0;
padding: 0;
}
#Home {
position: relative;
height: 100vh;
width: 100vw;
background-image: url(/images/Header.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#Menu {
display: block;
position: relative;
height: auto;
width: 100vw;
background-image: url(/images/Menu.jpg);
background-size: cover;
background-repeat: no-repeat;
}
<html>
<body>
<section id="Home"></section>
<section id="Menu"></section>
<section id="Map"></section>
</body>
</html>
The only way you can achieve this is by not using the actual background property.
As #Mr Lister commented:
There is no way for an element to know the height of a background
image.
However, you can use an img tag with the image you want as background inside your #menu section.
Then, create a container div with absolute positioning which will contain the content of your actual section.
html,
body {
position: relative;
background: white;
margin: 0;
padding: 0;
}
#Home {
position: relative;
height: 100vh;
width: 100vw;
background-image: url(http://i.imgur.com/8tcxHWh.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#Menu {
display: block;
position: relative;
width: 100vw;
}
.content {
position: absolute;
left: 0;
top: 0;
}
h2 {
color: white;
font-size: 4em;
}
<section id="Home"></section>
<section id="Menu">
<img src="http://i.imgur.com/BF3ty6o.jpg">
<div class="content">
<h2>My content</h2>
</div>
</section>
<section id="Map"></section>
I have a fixed header that i want to keep behind the container div as I scroll down the page. as seen on http://www.madebydaryl.co.uk/. It's sorta working except the background of the content div seems to be hidden behind the background of the header. Not sure how to solve this..
My css:
header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;
display: table;
width: 100%;
z-index: 1;
top:0;
left:0;
}
.container {
position: relative;
margin-top:100vh;
background: #fff;
z-index: 2;
}
EDIT:
This kinda worked:
header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;
min-height: 100%;
width: 100%;
display: table;
top:0;
left:0;
}
.container {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
margin-top:100vh;
background: #fff;
}
Except the background of the container div doesnt stretch to cover all of the content, just the height of the viewport. Any ideas?
The effect that you are talking about is known as Parallax Sliding effect,
Check it here
http://stephband.info/jparallax/
or
http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellar-js--webdesign-7307
Alas, such a simple solution.
Just put another div inside the container div, and give it the background color.
so:
<header>content</header>
<div class="container>
<div class="bg">
Main content
</div>
</div>
and the same css except move the background to the .bg.
I need to put HTML content within a page template. The section I have been given is within a Div container defining the size I have to work with. The CSS for the template defines margins of 17.5% left and right meaning I have 65% in the centre to input my content. This is ok for a majority of the content I need to include except the background image that needs to be full width (100%). I can attach a style sheet with my content however if I change the .wrapper element in my css it causes issues with the rest of the page. I also have to change the background image on a page by page basis so have to include the image path in the HTML and not in the CSS.
What I have so far is
HTML:
<div class="pageBackground">
<img src="img/festival-background.jpg">
</div>
CSS:
.pageBackground {
position: relative;
}
.pageBackground img {
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
What would be a correct way to make my background image 100% of the page rather then container and behind the rest of my content?
Many thanks in advance!!!
This is entirely possible using the same techniques as detailed in this Q/A.
Essentially, using no additional HTML, we use an absolutely positioned pseudo-element as the background to the required section/div.
.extra {
position: relative;
}
.extra::after {
content: '';
position: absolute;
top:0;
width: 100vw;
height: 100%;
left:50%;
transform:translateX(-50%);
background-image: url(http://lorempixel.com/output/abstract-q-c-1000-250-5.jpg);
background-size: cover ;
background-repeat: no-repeat;
}
* {
margin: 0;
padding: 0;
}
.container {
width: 65%;
margin: auto;
border: 1px solid green;
}
section {
min-height: 100px;
border: 1px solid lightgrey;
}
.extra {
position: relative;
}
.extra::after {
content: '';
position: absolute;
top: 0;
width: 100vw;
height: 100%;
left: 50%;
transform: translateX(-50%);
background-image: url(http://lorempixel.com/image_output/abstract-q-c-100-100-1.jpg);
background-size: cover;
background-repeat: no-repeat;
}
<div class="container">
<section></section>
<section class="extra"></section>
<section></section>
</div>
Don't know if you have that kind of permission, but you could put img outside that div, and set them both on position absolute.
<img src="asdf>
<div class="wrapper">
CSS:
.wrapper {
position: absolute;
text-align: center;
width: 65%;
background-color: transparent;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -32.5%;
}
img {
position: absolute;
top: 50%;
width: 100%;
height: 50px;
background-color: gray;
}
jsFiddle
In your CSS, add the background image to the body property and then put the rest of your site in an entire container div, within which all other properties will reside.
HTML:
<body>
<div class="entireSite">
Site content goes here.
</div>
</body>
CSS:
.body {
background-image:url("img/festival-background.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
.entireSite {
position: absolute;
z-index: -1;
}
I'm looking for the proper CSS method to overlay div of images on top of another div of images (not background image) without using position:absolute. Anyone know how to do this?
http://jsfiddle.net/HUUQ6/2/
You can overlay/overlap elements on top of one another using a negative margin.
Example:
#b{
margin-left:-10px;
}
This will move the element b to the left 10px, overlaying whatever is to the left of it (assuming this is a display:block type element, not an inline, like a span).
position: absolute isn't "improper" - it's part of the CSS spec! There isn't another way to put elements over other elements, unless you faff about with position: relative or maybe some float properties.
position: absolute is the easiest way to do it. What makes you think it's a bad idea?
The only other solution is to use an image inside a div with a background, like this:
<div>
<img src="...">
</div>
Then give the div a background-image:
div
{
background: url(/images/foo.png) no-repeat;
}
However, for multiple images I'd definitely stick to position: absolute.
There's a very glitchy demo here demonstrating the effect.
Here's how to layer 2 images and center the second image.
NOTE: "Position: absolute" in "image2" is only used so the images can overlap. It will still center your image responsively / without needing to use "left: " or "right: " or margin, and is independent of the image size.
HTML:
<div class="page-container">
<div class="images-container">
<img class="image1" src="YOURIMAGEURLHERE" />
<div class="image2container">
<img class="image2" src="SECONDIMAGEURLGOESHERE" />
</div>
</div>
</div>
CSS:
body, html {
height: 100%;
width: 100%;
margin: 0;
}
.images-container {
position: relative;
top: 0;
left: 0;
background-position: center;
background-repeat: no-repeat;
}
.image1 {
position: relative;
top: 0;
left: 0;
//if you want to blur the outer image
//transform: scale(1.1);
//filter: blur(20px);
//-webkit-filter: blur(20px);
height: 100vh;
width: 100vw;
}
.image2container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.image2 {
position: absolute;
top: 0px;
}
.page-container{
}
SCSS (if you prefer it, which I do - makes it much easier to copy styles from 1 file to another)
body, html {
height: 100%;
width: 100%;
margin: 0;
}
.page-container {
.images-container{
position: relative;
top: 0;
left: 0;
background-position: center;
background-repeat: no-repeat;
.image1 {
position: relative;
top: 0;
left: 0;
//if you want to blur the outer image
//transform: scale(1.1);
//filter: blur(20px);
//-webkit-filter: blur(20px);
height: 100vh;
width: 100vw;
}
.image2container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.image2 {
position: absolute;
top: 0px;
}
}
}
}