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.
Related
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 */
}
Recently I have come across a problem for which I am not finding any appropriate solution.
Below is the image which gives an idea of what i am trying to achieve:
The div shown by the arrow is the mark of the problem which i am finding a solution for.
The problem is I want the div to be extended to full screen.
This div is inside a parent div who has a fixed width due to which i am not able to extend my image to full screen.
Have tried giving overflow to parent but isn't working.
I have tried below solution which is working to a certain extent but need a reliable solution.
width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;
Could someone please provide some solution to this?
html, body
{width: 100%; height: 100%; overflow: hidden;}
#parent{
display: block;
background-color: yellow;
border: 1px solid red;
position: fixed;
width: 200px;
height:100%;
}
#child1{
background-color: red;
display: block;
border: 1px solid yellow;
position: absolute;
width: 100vw;
margin-left: calc(200px - 100%);
//top:0px
}
<div id="parent">parent with position: fixed
<div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>
use Viewport Sizes so it will cover the whole page (vw and vh)
#first {
width: 100px;
height: 100px;
background:gray;
position: fixed;
top: 0;
left: 0;
}
#second{
width: 100vw;
height: 100vh;
background:blue;
position:absolute;
}
<div id="first">
<div id="second">
something
</div>
</div>
The below code snippet should work, if I understand your question correctly. Setting the width of the child div to 100vw makes the div 100% of the width of the viewport (window).
Also note that in order to get the child to start at the left of the viewport and not the left of the parent, I gave the child a position of absolute and a left of 0. Because the parent is not positioned, it starts the left of the child at the left of the viewport (the closest positioned ancestor).
#parentDiv {
width: 250px;
height: 250px;
margin: 0 auto;
background-color: orange;
border: 2px solid red;
}
#childDiv {
/* 100vw is 100% of the viewport width. */
width: 100vw;
height: 50px;
background-color: lightblue;
box-sizing: border-box;
border: 2px solid green;
position: absolute;
left: 0;
}
p {
text-align: center;
}
<html>
<body>
<div id="parentDiv">
<p>Parent</p>
<div id="childDiv"><p>Child</p></div>
</div>
</body>
</html>
I have a fixed div with the css width: 400px; height: 280px; but my image comes from various dimension, some are portrait some landscape. How do I fit/stretch/fill my image regardless of source size into the div size?
#giorgi-parunov has the simplest and best method. owever if you want to use , I suggest that you use css to make the image responsive to the div.
img {
max-width:100%;
height: auto
}
You can also use object-fit: cover
If you have fixed size on div you can just set height/width of img to 100%.
div {
width: 150px;
height: 50px;
border: 1px solid black;
}
img {
width: 100%;
height: 100%;
}
<div>
<img src="http://cdn2.spectator.co.uk/files/2016/04/iStock_000069830477_Small.jpg">
</div>
If you want to fill div but you also want to keep image aspect ratio you can use object-fit: cover that is similar to background-size: cover when you use img as background.
div {
width: 100px;
height: 150px;
border: 1px solid black;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div>
<img src="http://cdn2.spectator.co.uk/files/2016/04/iStock_000069830477_Small.jpg">
</div>
I think the best way yo do it , do it with background-image.
HTML<div style="background-image: url("paper.gif"); background-size: cover; background-position: center;"></div>
It is the best way to add your image to the div without Javascript.
You can check this answer to fit any image in a container centered
https://stackoverflow.com/a/36063374/2894798
In your case the code would be
.container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
width: 400px; /*customize to your needs 100%*/
height: 280px; /*customize to your needs*/
}
.container img
{
max-width:100%;
max-height:100%;
}
here is the fiddle
Stack Overflow seems to be full of similar questions but I haven't found a satisfying answer for my use case. Basically, I need a responsive, full screen background image for the top part of my front page. Means, narrowing the viewport leads to cropping, not stretching; the image should be centered. I'd like to avoid JS for this.
Aaron created a fiddle that almost looks like what I'm searching for. Two problems:
Strange behaviour when narrowing viewport (below 500px width)
position: fixed;
I was able to reproduce the solution of Bryce Hanscomb and Gabriela Gabriel for a container (see my fiddle):
But I failed to extend this to full screen. This is my code (see fiddle):
HTML:
<div id="background">
<img src="//dummyimage.com/600x200/0099cc/fff.png" />
</div>
CSS:
div#background {
background-color: orange;
min-height: 100%;
min-width: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: -1;
}
img {
left: 50%;
position: relative;
transform: translate(-50%, 0);
min-height: 100%;
min-width: 100%;
}
Problem #1: The image doesn't take up the full height of its parent div (with min-height set to 100%).
Problem #2 + #3: In a narrow viewport, the image is cut off on the right (not centered), and a horizontal scrollbar is shown.
As a side note, can somebody tell me where those 4 pixels come from?
Your image will fill the entire space and also not have the problem of not being centered if you use position:absolute on your image
div#background {
background-color: orange;
min-height: 100%;
min-width: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: -1;
}
img {
left: 50%;
position: absolute;
transform: translate(-50%, 0);
min-height: 100%;
min-width: 100%;
}
The issue with the 4px at the bottom is because images always align to the top just like text, this also adds a bit of padding to the bottom to make the baseline for the text so that letters can hang down under the rest.
If you set vertical-align: bottom it should fix it like so:
h1 {
text-align: center;
}
div#container {
background-color: black;
height: 200px;
width: 100%;
margin: 50px auto;
}
div#content {
background-color: orange;
min-width: 100%;
overflow: hidden;
}
img {
left: 50%;
position: relative;
transform: translate(-50%, 0);
vertical-align: bottom;
}
<div id="container">
<div id="content">
<img src="//dummyimage.com/600x200/0099cc/fff.png" />
</div>
</div>
For the centre aligning of the image, I would personally recommend actually using css background-image and then setting the background-position like so:
div#background {
background-color: orange;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
z-index: -1;
background: url(//dummyimage.com/600x200/0099cc/fff.png) center center no-repeat;
background-size: cover;
}
<div id="background">
</div>
I have a div I would like which I have placed at 25% from the top. However, the 25% are computed with respect to the size of the background image and not with respect to the size of the visible screen. How can this be fixed?
Update: now the top margin works, but not the left one :(
Any clue?
body {
background: #eeeeee url('pix/bg-noether-2.jpg') no-repeat center top;
background-size: auto 100%;
background-attachment: fixed;
overflow: hidden;
align: center;
}
#container {
background-color: #ffffe4;
position: absolute;
width: 776px;
height: 400px;
top: 25%;
margin-left: auto;
text-align: center;
overflow: auto;
}
1) use absolute positioning:
#myDiv { position: absolute; top: 25%; }
2) make sure your div is not within another positioned element (if you're not sure of this, just put it just inside the <body> tag, nothing else)
use css property:
div#myDiv {
position:absolute;
top: 25%;
}
on the dive that you want placed 25% from top of visible screen.
if you use relative position then the percentage will be calculated from the parent element.
if you use absolute position the percentage will be calculated from the size of the screen.
So try to using position absolute instead of relative.
edited answer for comment, just add extra div with id wrapper and change postitions, see example below:
<html>
<head>
<style type="text/css">
body {
background: #eeeeee url('pix/bg-noether-2.jpg') no-repeat center top;
background-attachment: fixed;
overflow: hidden;
text-align: center;
}
#wrapper {
position:absolute;
width:100%;
height:100%;
}
#container {
background-color: #ffffe4;
position: relative;
margin:0 auto;
width: 776px;
height: 400px;
top: 25%;
text-align: center;
overflow: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
bla bla bla
</div>
</div>
</body>
</html>