I am facing an issue with making the header in the main page layout split into two images from bottom left to top right. All the resources that I found are split them into two colors. However, when I want to add pictures, I could not see any result.
See the code that I did and I do not know how to remove the space between them
class-image-1 {
background-image: url(/img/imag-1-bg.png);
height: 100vh;
-webkit-clip-path: polygon(1px 100vh,100% 1px,311px -1px,0px 0px);
background-repeat: no-repeat;
position: relative;
background-position: center;
background-size: cover;
background-attachment: fixed;
margin: 0 auto;
}
class-image-2{
background-image: url(/img/bg.jpg);
height: 100vh;
-webkit-clip-path: polygon(0px 100vh,100% 100vh,100% 1px);
position: relative;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
margin: 0 auto;
}
I did the same code above but I got space between the images I want them in one page. Just to clearly see this image it might give you an idea.
Your code is almost good, you are simply doing wrong with positions. You should make them absolute position inside a container, they should behave like layers (one above the other). I also replaced the values in the clip-path with 0 and 100% so it's more generic :
body {
margin: 0;
padding: 0;
min-height: 600px;
}
.banner {
height: 100vh;
position: relative;
}
.class-image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.class-image-1 {
background-image: url(https://lorempixel.com/800/800/);
-webkit-clip-path: polygon(0 100%, 100% 0, 100% 0px, 0 0);
}
.class-image-2 {
background-image: url(https://lorempixel.com/800/700/);
-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);
}
<div class="banner">
<div class="class-image class-image-2">
</div>
<div class="class-image class-image-1">
</div>
</div>
Related
Is it possible to use CSS to make the background of the top 5% of a page a solid color, and two different background images for the remaining 65% and 30%?
This is how I need it to look:
Edit 2: So there are numerous ways to accomplish this.
Pseudo elements: I think this is the best method, as it avoids extra elements in the markup and allows good control of scaling/cropping. Example below.
Multiple containers: Works just like pseudo elements, but with the added disadvantage of extra elements in the markup. The best support across older browsers, but these days, pseudo elements are quite well supported. Example below.
Multiple backgrounds: This may be suitable for solid colors or gradients, but for most images scaling and cropping will be problematic if using percentages for size. Example below.
1. Pseudo Elements
Just add ::before and ::after pseudo elements to the pagewrapper, supply background images, and position accordingly.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: relative;
height: 100%;
background-color: green;
}
.pagewrap::before {
content: "";
position: absolute;
top: 5%;
left: 0;
height: 65%;
width: 100%;
background-image: url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: cover;
background-position: center;
}
.pagewrap::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 30%;
width: 100%;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg");
background-size: cover;
background-position: center;
}
<div class="pagewrap">
</div>
2. Multiple Containers
Just replace the pseudo elements in above example with container divs in the html.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: relative;
height: 100%;
background-color: green;
}
.mid65 {
position: absolute;
top: 5%;
left: 0;
height: 65%;
width: 100%;
background-image: url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: cover;
background-position: center;
}
.btm30 {
position: absolute;
bottom: 0;
left: 0;
height: 30%;
width: 100%;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg");
background-size: cover;
background-position: center;
}
<div class="pagewrap">
<div class="mid65"></div>
<div class="btm30"></div>
</div>
3. Multiple Background Images
Use multiple background images:
background-image: url("image1.jpg"), url(image2.jpg);
then use the same comma separated syntax
for background-repeat: no-repeat, no-repeat; (same value need not repeat)
and background-size: 100% 30%, 100% 65%;,
etc..
The background position is the tricky part though, because it doesn't seem to work as one might expect (Temani Afif kindly provided a very informative link in the comments below ). But this seems to achieve the desired result of 5% 65% 30%:
background-position: bottom left, 0% 15%;
Edit: Replaced gradients with actual images so you can see how image stretching may be an issue with this method. More suitable for solid colors or gradients.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: fixed;
width: 100%;
height: 100%;
background-color: blue;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg"), url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: 100% 30%, 100% 65%;
background-position: bottom left, 0% 15%;
background-repeat: no-repeat;
}
<div class="pagewrap"></div>
http://lucasdebelder.be/stack/index.html
Make sure to check it out at 1680px width, then it's perfectly aligned together but if I make my screen bigger or smaller in width it doesn't align anymore any idea how I can get around this issue?
I'm trying to recreate my Dribbble shot.
Snippet of code.
.wrapper {
position: absolute;
top: 50%;
left: 50%;
height: 80%;
width: 80%;
transform: translate(-50%,-50%);
background: #F1F1F1;
box-shadow: 0 0 90px 0 rgba(0,0,0,0.45);
border-radius: 15px;
background-image: url("http://svgur.com/i/3W7.svg");
background-position: 129% 38%;
background-repeat: no-repeat;
background-size: 752px;
}
#section0 {
background-image: url("http://svgur.com/i/3W7.svg");
background-position: 100% 0%;
background-repeat: no-repeat;
background-size: 750px;
}
<section class="wrapper">
<h1>TEST</h1>
</section>
EDIT: It's hard to recreate this in a small jsfiddle, keep that in mind but then you get to see the code.
Your code snippet seems to be a little bit broken, but I was able to produce the desired effect by using the unit vw for your background position, which is dependant on the viewport width.
#section0 {
background-image: url(../img/1/bol.svg), url(../img/1/vlekBG.svg);
background-position: 0vw bottom, 61vw;
background-repeat: no-repeat;
background-size: auto, 750px;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
height: 80%;
width: 80%;
transform: translate(-50%,-50%);
background: #F1F1F1;
box-shadow: 0 0 90px 0 rgba(0,0,0,0.45);
border-radius: 15px;
background-image: url(../img/1/vlekBG.svg);
background-position: 51vw;
background-repeat: no-repeat;
background-size: 752px;
These are the changes I made in the developer tools and the imaged stayed aligned, independet of the viewport width.
Edit: changed the code a little, because I didn't realize there were two background images in #section0
In the photo above where the gray container is set I want to add a high contrast black and white photo filter.
Iv tried scaling the opacity and using the filter css3 property but have had no success.
The body is the background image and the child container is the gray box. I want to just have the child show the black and white.
body{
background: url('../images/wtc.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.profile-box{
background-color: grey;
width: 80%;
height: 60%;
margin-top: 180px;
margin-bottom: 100px;
}
Easiest solution, but least supported: backdrop-filter
The most straight-forward way, is to actually use the rather new backdrop-filter property. Unfortunately it is only supported in Safari (and Chrome Canary) so far.
body{
background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}
.profile-box{
width: 80%;
height: 60%;
/* Backdrop filter */
-webkit-backdrop-filter: grayscale(100%);
backdrop-filter: grayscale(100%);
/* Additional styles for positioning */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="profile-box"></div>
The code snippet above will render something similar to this on Safari:
Complicated solutions, but more cross-browser compatible
Using the deprecated clip:
An alternative solution that will see more support across browser is to use the clip: rect(...) property. This property has been, however, deprecated in favour of clip-path (see next section for the updated solution). Since you have specified on your code that you wanted a grayscale area that is 80% in width and 60% in height (relative to viewport, so that is equivalent to 80vw and 60vh), we can tune the arguments passed into clip: rect(...) as such:
clip: rect(30vh, 90vw, 70vh, 10vw);
The coordinates represent offset from the top/left corners of the page of the top, right, bottom, left edges of the clip rectangle. To center a 80vw horizontally, we need 10vw on left and right (adding up to 20vw). To center a 60vh vertically, we need 20vh on top and bottom (adding up to 40vh). This computes to:
20vh from the top (this is the TOP border measured from top)
90vw from the left (this is the RIGHT border measured from left)
80vh from the top (this is the BOTTOM border measured from top)
10vw from the left (this is the LEFT border measured from left)
The image below will help you explain the calculations more:
body{
background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
}
.profile-box {
background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed;
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
filter: grayscale(100%);
clip: rect(20vh, 90vw, 80vh, 10vw);
}
<div class="profile-box"></div>
Using the new property, clip-path:
Even though it is a more modern standard compared to clip, it still suffers from non-support in IE or Edge. The arguments of clip-path: inset(...) are not comma-separated, unlike that of clip: rect(...), and it is slightly more intuitive to use because each edge is measure relative to the corresponding edge of the browser. In that case, using the same calculation logic we have established above, the arguments will be:
20vh from the top
10vw from the right
20vh from the bottom
10vw from the left
In other words, something like this:
clip-path: inset(20vh 10vw 20vh 10vw);
body{
background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
}
.profile-box {
background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed;
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
filter: grayscale(100%);
clip-path: inset(20vh 10vw 20vh 10vw);
}
<div class="profile-box"></div>
What you are trying to do is usually a pretty hard thing to achieve with css but it is possible. I think this answer will help you:
TAKEN FROM https://stackoverflow.com/a/19382357/8312881
written by edensource
If it has to be dynamic, you should have some trouble, but you can
have somewhere to start with this :
HTML
<div class="background"></div>
<div class="mask">
<div class="bluredBackground"></div>
</div>
<div class="content"></div>
CSS
.content {
width: 70%;
height: 70%;
border:2px solid;
border-radius:20px;
position: fixed;
top: 15%;
left: 15%;
z-index:10;
background-color: rgba(168, 235, 255, 0.2);
}
.background {
width:100%;
height:100%;
background-image:url('http://www.travel.com.hk/region/time_95.jpg');
z-index:2;
position:fixed;
}
.bluredBackground {
width:100%;
height:100%;
display:block;
background-image:url('http://www.travel.com.hk/region/time_95.jpg');
z-index:1;
position:absolute;
top:-20%;
left:-20%;
padding-left:20%;
padding-top:20%;
-webkit-filter: blur(2px);
}
.mask {
width: 70%;
height: 70%;
border:2px solid;
border-radius:20px;
position: fixed;
top: 15%;
left: 15%;
z-index:10;
overflow:hidden;
}
FIDDLE
http://jsfiddle.net/sE4Fv/
FIDDLE with greyscale filter
http://jsfiddle.net/sE4Fv/926/
(you did not respond to my question in comments, so i still go with an average answer untill feedback shows ;) )
you can use an rgba() color if the matter is to darken your image.
A simple example with background or image to show the idea, a third example showing the use of the grayscale(X%) filter if the matter is turn blac & white the image:
.filter {
position: relative;
float: left;
width: 50%;
}
.filter:before {
content: '';
position: absolute;
top: 15%;
right: 5%;
bottom: 15%;
left: 5%;
background: rgba(0, 0, 0, 0.5);
}
.filter img {
display: block;
width: 100%;
}
.filter.bg {
box-sizing: border-box;
padding: 1.5% 2.5%;
background: url(http://lorempixel.com/1200/250/city/5) center / 100% auto;
}
.bg:before {
display: none;
}
.content {
min-height: 7.45vw;
height: 100%;
background: rgba(0, 0, 0, 0.5)
}
.grayscale .content {
background: url(http://lorempixel.com/1200/250/city/5) center / 50vw auto;
filter: grayscale(100%);
}
body {
margin: 0;
}
<div class="filter">
<img src="http://lorempixel.com/1200/250/city/5" alt="my nice City" /></div>
<div class="filter bg ">
<div class="content">Some content hover the bg </div>
</div>
<div class="filter bg grayscale ">
<div class="content">Some content hover the bg </div>
</div>
Your body is ok, just the .profile-box needs some fixes:
div.profile-box {
background: url('https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg') no-repeat center center fixed;
background-size: cover;
filter: grayscale(100%);
// width & height etc...
}
Attach your background in the box as well and add filter: grayscale(100%)
Demo
I am making a layout with an background in body. I need to center it both horizontally and vertically. For that purpose I use background-position:center.
background-image:url('address');
background-repeat:no-repeat;
background-position:50% 50%;
However, the background not positoned correctly vertically: you can see only half of the image in the top of the screen. Check it here link to codepen.
As a solution I tried to use images with different sizes and background-position:50% 50%. Then I double-checked other background-relative selectors and found that if I add background-attachement and change it from its default value which is scroll to fixed, than the image is centered correctly.
Can anybody explain please why this happens?
It happens if you didn't gave the body a height, as its default is 0.
The body's height is based on its content, and a background image doesn't set it.
Here is a sample showing how you need to do
html, body {
margin: 0;
height: 100%;
}
body {
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
}
Sometimes it can create other issues when one need to give the body a height, and when, a positioned div is one option
#bkgdiv {
position: absolute;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
}
<div id="bkgdiv"></div>
So, based on how/if you need to use background-attachment: scroll and/or positioned div's, here is a sample showing their behavior when one scroll (and a fiddle demo to play with)
html, body {
margin: 0;
height: 100%;
}
body {
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
}
#bkgdiv {
position: absolute;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/180/0f0);
background-repeat: no-repeat;
background-position: center center;
}
#bkgdivfixed {
position: fixed;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/160/ff0);
background-repeat: no-repeat;
background-position: center center;
}
<div id="bkgdiv"></div>
<div id="bkgdivfixed"></div>
<div style="width: 5px; height: 150vh; background: red; margin: 5px"></div>
If you want to gave background to body, its really simple task.
initially you need to write css for body and html
html, body {
margin: 0;
height: 100%;
}
The next ting is you need to gave background css to the body
body {
background-image: url(https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg);
background-position: center;
background-repeat: no-repeat;
}
Okey now the image seems to be the center of the body(screen),
Now you can adjust the size using background-size property.
background-size: cover;
The images enlarged enough to cover the entire screen.
background-size: contain;
The images enlarged up to the height or width(which is smaller) of the screen.
you can give fixed size my giving size to it
background-size: Xpx Ypx;
I want to create a box that goes over the whole width of the screen, so always responsive the full screen width.
My current CSS code always limited the box to the Boddy, but I want the full width.
In addition, I want a background image in the box.
Can someone help me?
My CSS:
div.bg {
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;}
Use Viewport units: vw, vh, vmin, vmax
div.bg {
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
}
read more
div.bg {
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: auto;
z-index: 9;}
The box works and scrolls always at the bottom.
Now I would like a small X in the right corner so that the user can close the box, best function to close and reopen
Is there something which prevents you from setting the div as position:fixed?
If not, it's quite simple:
div.bg
{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: auto;
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;
}