I have two div's above one another. The top div has a background .svg at the bottom with the same color as the background of the bottom div. These should align perfectly, however, they do not. There is an ever so slight amount of transparent space between them. This space disappears when zooming in and reappears when zooming in even further (see screenshots).
.top {
width: 100%;
height: 100vh;
background-color: #3772ff;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20378%20378%22%3E%3Cpath%20d%3D%22M0%2C378l378%2C-0l-0%2C-47.25l-378%2C47.25Z%22%20style%3D%22fill%3A%2301161e%3B%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: scroll;
background-size: 100%;
margin: 0;
}
.bottom {
background-color: #01161e;
padding: 128px 20%;
}
<div class="top"></div>
<div class="bottom"></div>
Screenshots:
100% zoom:
A bit zoomed in:
Zooming in even further:
There may be a more elegant solution to be had, but simply pulling the lower element up a fraction of a pixel overcomes the sub-pixel rounding issue.
.top {
width: 100%;
height: 100vh;
background-color: #3772ff;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20378%20378%22%3E%3Cpath%20d%3D%22M0%2C378l378%2C-0l-0%2C-47.25l-378%2C47.25Z%22%20style%3D%22fill%3A%2301161e%3B%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: scroll;
background-size: 100%;
margin: 0;
}
.bottom {
background-color: #01161e;
padding: 128px 20%;
margin-top: -.5px;
/* transform: translateY(-.5px); alternative approach */
}
<div class="top"></div>
<div class="bottom"></div>
Of course, you could just set the body background (or that of a container element) to hide it as well:
.container {
background-color: #01161e;
}
.top {
width: 100%;
height: 100vh;
background-color: #3772ff;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20378%20378%22%3E%3Cpath%20d%3D%22M0%2C378l378%2C-0l-0%2C-47.25l-378%2C47.25Z%22%20style%3D%22fill%3A%2301161e%3B%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: scroll;
background-size: 100%;
margin: 0;
}
.bottom {
background-color: #01161e;
padding: 128px 20%;
}
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
Related
i´m building a website that has different background images as you scroll down.
The problem I am facing is that each background image is not fitting the screen (in terms of the height). My images won't fit the whole screen unless I set them to have 1100px and therefore will not be fitting the 100% of my height, but let's say they will be going down, on those 20% who are going to come as I scroll down.
I would like to have my images fit 100% of the screens height, without being cut
and going bellow the page.
.container {
background-size: 100%;
background-size: cover;
margin-top: 1vh;
}
.parallax {
background: url("quem-somos.png") ;
background-size: cover;
width: 100%;
height: 100%;
}
.parallax2{
background: url("servicos.png") no-repeat center;
background-size: cover;
height: 1100px;
width: 100%;
background-attachment: scroll;
}
.parallax3{
background: url("depoimentos.png") no-repeat center;
background-size: cover;
height: 1100px;
width: 100%;
background-attachment: scroll;
}
.parallax4{
background: url("comecando.png") no-repeat center;
background-size: cover;
height: 1100px;
width: 100%;
background-attachment: scroll;
}
.parallax5{
background: url("sac.png") no-repeat center;
background-size: cover;
height: 1000px;
background-attachment: scroll;;
width: 100%;
}
.parallax6{
background: url("onde-atuamos.png") no-repeat center;
background-size: cover;
background-attachment: scroll;
height: 1000px;
width: 100%;
}
I have put all of the images inside the container
<div class="container">
<div class="parallax" id="about">
</div>
<div class="parallax6" id="operations">
</div>
<div class="parallax2" id="servicos">
</div>
<div class="parallax3" id="Depoimentos">
</div>
<div class="parallax4" id="Comecando">
</div>
<div class="parallax5" id="sac">
</div>
</div>
You can use this to set the div height to the screen height, you have to make sure html and body have a min height of the screen and also set the background-size: cover
Also .image1 .image2 in my case are direct children of the body element in my example
html, body {
margin: 0;
width: 100%;
min-height: 100vh;
}
.image1 {
width: 100%;
height: 100vh;
background-color: red;
}
.image2 {
width: 100%;
height: 100vh;
background-color: blue;
}
You can have the child divs do the heavy lifting by setting heights to 100vh - the margin on top of the container.
https://jsfiddle.net/x2h0mat7/
Here's a working example with the original html:
<div class="container">
<div class="parallax" id="about">
</div>
<div class="parallax6" id="operations">
</div>
<div class="parallax2" id="servicos">
</div>
<div class="parallax3" id="Depoimentos">
</div>
<div class="parallax4" id="Comecando">
</div>
<div class="parallax5" id="sac">
</div>
</div>
and the css:
.container {
margin-top: 1vh;
}
.container>div {
min-height: calc(100vh - 1vh);
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
z-index: 2;
display: flex;
overflow: hidden;
background-attachment: scroll;
}
.parallax {
background: url("https://via.placeholder.com/1600x1200/0000FF/");
}
.parallax2 {
background: url("https://via.placeholder.com/1600x1200/990000/") no-repeat center;
}
.parallax3 {
background: url("https://via.placeholder.com/1600x1200/ffee66/") no-repeat center;
}
.parallax4 {
background: url("https://via.placeholder.com/1600x1200/66eeff/") no-repeat center;
}
.parallax5 {
background: url("https://via.placeholder.com/1600x1200/ee66ff/") no-repeat center;
}
.parallax6 {
background: url("https://via.placeholder.com/1600x1200/ffee66/");
}
I have made a codepen to explain my problem:
When the user scroll, the blue images should follow the user scroll
The blue images should be stuck on the opposite side of the aside parts (right for the left one | left for the right one)
The pb is that
background-attachment : fixed;
isn't working this the css rule
background-position: left 0px;
Someone can help me by forking the codepen to show me a working implementation ?
.wrapper {
display: flex;
}
main {
background-color: red;
height: 1000px;
max-width: 992px;
width: 100%;
}
aside {
min-width: 150px;
background-color: green;
}
.left {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: right 0px;
/*background-attachment: fixed; Doesn't work*/
}
.right {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: left 0px;
/*background-attachment: fixed; Doesn't work*/
}
<div class="wrapper">
<aside class="left"></aside>
<main></main>
<aside class="right"></aside>
</div>
Why is this happening?
This is working as intended, when you use background-position: fixed; the background is positioned relative to the viewport. This means in your example the background is now aligned on the very left of the viewport outside of the .right element.
You can see this by positioning .right along the left edge of the viewport in the snippet below.
.wrapper {
display: flex;
}
main {
background-color: red;
height: 1000px;
max-width: 992px;
width: 100%;
}
aside {
min-width: 150px;
background-color: green;
}
.left {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: right 0px;
/*background-attachment: fixed; Doesn't work*/
}
.right {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
background-position: left 0px;
background-attachment: fixed;
order: -1;
}
<div class="wrapper">
<aside class="left"></aside>
<main></main>
<aside class="right"></aside>
</div>
What can you do?
There is no way to position the background relative to the element when using background-position: fixed; but you can achieve a similar desired result by using a position: fixed; pseudo element:
Add a new selector .left:before, .right:before with the following rules
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png); - The background image
background-repeat: no-repeat; - Stop the background from repeating
content: ""; - Required for the pseudo element to show
position: fixed; - Set the pseudo element to be fixed relative to the viewport
height: 100%; - Make the pseudo element fill the entire height
width: 100px; - Same as the width of the background image
.wrapper {
display: flex;
}
main {
background-color: red;
height: 1000px;
max-width: 992px;
width: 100%;
}
aside {
min-width: 150px;
background-color: green;
}
.left {
direction: rtl;
}
.left:before, .right:before {
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat;
content: "";
position: fixed;
height: 100%;
width: 100%;
}
.left:before {
background-position: right top;
}
.right:before {
background-position: left top;
}
.right div {
position: relative;
}
<div class="wrapper">
<aside class="left"></aside>
<main></main>
<aside class="right">
<div>content</div>
</aside>
</div>
Please note, if you intend to put other content into .right you will need to add position: relative; to the element to set the stacking context above the pseudo element (see the div in the snippet).
Why does this work?
position: fixed; fixes the element to a set position relative to the viewport. By not setting a bottom, left, right or top position the pseudo element stays where it is originally positioned. The background can them be applied to the element in the usual way.
The problem is that you don't scroll the aside because you scroll the body
You should avoid that because it's not responsive but you can get the idea of it
.wrapper {
width: 558px;
background-color: green;
background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png), url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
background-repeat: no-repeat, no-repeat;
background-position: left 47px top 0px, right 104px top 0px;
background-attachment: fixed;
}
main {
background-color: red;
width: 280px;
height: 1000px;
margin: 0px auto;
}
<div class="wrapper">
<aside class="left"></aside>
<main></main>
<aside class="right"></aside>
</div>
I have a problem, as situated in the image:
When I am scrolling down, the background image I have (the blue one) gets a white area, while that should be blue too. The blue background should be blue everywhere, yet because it's skewed and I am using it as a fixed background image, it does not work, somehow.
HTML:
<div class="wrapper">
<p>Here comes some text and so on</p>
</div>
CSS:
.wrapper {
background: url("myimage.png");
background-attachment: fixed;
transform: skewY(3deg);
min-height: 500px;
}
The white background you can see, is the body background. It should not be there, yet it is, somehow. When I would remove background-attachment: fixed, it works, yet I want to have it fixed as I am using parallax scrolling.
So it looks like transform: skewY(3deg); and background-attachment: fixed are blocking each other. I tried adding z-index and so on, but nothing is working for me at the moment.
Is there a way to fix this?
To fix so that slope only occur at the bottom, use a pseudo.
For the skewY() to transform upwards, use transform-origin: right top;, then set overflow: hidden to the wrapper to clip the upper part and the slope is only visible at the bottom.
html, body {
margin: 0;
}
body {
background: red;
}
.wrapper {
position: relative;
height: 200px;
width: 100%;
min-height: 1500px;
overflow: hidden;
}
.wrapper.nr2::before {
content: '';
position: absolute;
left: 0;
top: 0;
background: url("http://www.planwallpaper.com/static/images/6790904-free-background-wallpaper.jpg");
height: 100%;
width: 100%;
transform: skewY(3deg);
transform-origin: right top;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper::before {
content: '';
position: absolute;
left: 0;
top: 0;
background: url("http://www.planwallpaper.com/static/images/6790904-free-background-wallpaper.jpg");
height: 100%;
width: 100%;
transform: skewY(3deg);
transform-origin: right top;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper div {
position: relative;
color: red;
font-size: 30px;
}
<div class="wrapper nr2">
<div>Some text</div>
</div>
<div class="wrapper">
<div>Some more text</div>
</div>
I was wondering how to center 3 divs inside a div.
Here is my code example
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
float: left;
text-align: center;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div>
<div id="plaatje2" class="plaatje">
</div>
<div id="plaatje3" class="plaatje">
</div>
</div>
The problem is, there is still a white space on the right hand-side of the picture, I have marked it so you know what i'm talking about.
It also needs to scale, so if I resize the window, that the third image doesn't pops below the first or that the space exists when I resize it fully.
Any help is appreciated.
I have created a jsFiddle which demonstrates how you can do this using flexbox. It doesn't require floating the elements and gives you with exactly what you're looking for.
I have added a wrapper around the images (.images) and given it the flex properties required to align its contents, then removed the floats and a few other unnecessary things.
Here is the browser support for flexbox: caniuse:flexbox
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.images {
height: 90%;
display: flex;
justify-content: center;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
}
<div id="container">
<div class="images">
<div id="plaatje1" class="plaatje"></div>
<div id="plaatje2" class="plaatje"></div>
<div id="plaatje3" class="plaatje"></div>
</div>
</div>
You could just simply try adding text-align:center; to your container div
There are many ways to do this, and you should probably start with http://www.w3schools.com/css/css_align.asp - this elementary level question often gets flagged as not appropriate for SO.
But! Welcome. Here's one way you could do this - I've added comments to explain what's going on. Basically your float: left by definition made the .plaatjes impossible to center; and the text-align: center needs to be on the containing element
body {
position: fixed; /* probably don't actually want */
height: 100%;
width: 100%;
margin: 0; /* add */
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
margin-left: 5%;
text-align: center; /* add */
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
/* float: left; // remove
text-align: center;*/
display: inline-block; /* add */
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div><div id="plaatje2" class="plaatje">
</div><div id="plaatje3" class="plaatje">
</div>
</div>
<!-- removed spaces between the divs -->
I have a <div> with a left aligned background image and some text.
I need the div (or an inner div) to have some padding so the text will start next to background image, not on it. Is there a way to do this with CSS?
Here is a fiddle and the CSS:
.mydiv {
background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
background-position: left bottom;
background-size: contain;
background-repeat: no-repeat;
background-color: #fff;
width: 500px;
height: 700px;
}
Flexbox and a pseudo-element could do this...assuming I have your intention right.
I need the div (or inner div) has some padding so the text will start next to background image, not on it
Basically, the inner div is 100% height of the parent element but any space after the text is taken up by the pseudo-element which has the image as a background.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.mydiv {
background-repeat: no-repeat;
background-color: white;
width: 100vw;
height: 100vh;
}
.mydiv div {
display: flex;
height: 100%;
}
.mydiv div:after {
content: '';
background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
background-position: left bottom;
background-size: contain;
background-repeat: no-repeat;
flex: 1;
}
<div class="mydiv">
<div>My Text here</div>
</div>
REVISION/ALTERNATE after commented requirements updated
I want the text starting next to image (on the right side of the background image), not on the image. The reason I want the image background because I want it to be a fixed background located bottom-left corner. I want the background image contained because I want the width of the image automatically calculated.
You would need to change the structure and put the image inline
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mydiv {
width: 100vw;
height: 100vh;
display: flex;
}
.imgdiv {
height: 100%;
}
.imgdiv img {
max-height: 100vh;
max-width: 100%;
}
.textdiv {
flex: 1 0 auto;
}
<div class="mydiv">
<div class="imgdiv">
<img src="http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312" alt="">
</div>
<div class="textdiv">My Text here</div>
</div>
JSFiddle Demo
If you want the text not to appear on the background image but below it, I have two solutions:
First:
Use separate div for background image like
.mydiv {
background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
background-position: left bottom;
background-size: contain;
background-repeat: no-repeat;
background-color: #fff;
width: 100vw;
height: 100vh;
}
<div class="mydiv"></div><div>My Text here</div>
Second:
Apply the following CSS to the div containing text.
.mydiv {
background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
background-position: left bottom;
background-size: contain;
background-repeat: no-repeat;
background-color: #fff;
width: 100vw;
height: 100vh;
}
#innerText {
padding-top: 105vh;
}
<div class="mydiv"><div id="innerText">My Text here</div></div>
No need for 2 div , you can achieve all with only one in a very simple way
Try this code:
.mydiv {
background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312');
background-position: 0 0;
background-size: 250px auto;
background-repeat: no-repeat;
background-color: #fff;
width: 500px;
height: 700px;
padding-left: 255px;
text-align: left;
}