JsFiddle
Html
<div class="content">Blabbles</div>
CSS
html, body {
margin: 0;
height: 100%;
min-height: 100%;
position: relative;
}
html{
border-image: linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40% repeat;
border-width: 10px;
}
Attempted to have gradient border stay around the screen but when the content is longer, the content pass through and the border is scrolling up/down.
Tried both: position: fixed and background-attachment: fixed but they doesn't make border to stay on screen no matter whether content is longer or shorter.
Also how to make the content go through behind the border if it is longer?
Codepen http://jsfiddle.net/d3ckg18e/5/
CSS code (no need to set a height/min-height to html or body element
body:before {
box-sizing : border-box;
position : fixed;
z-index : 1;
height : 100vh;
width : 100%;
content : "";
border-image : linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40% repeat;
border-width : 10px;
pointer-events: none;
}
.content {
padding: 15px;
}
Result
EDIT Incorrect answer, this is not specifically what the OP has wanted. I will still keep this here in-case this could help someone else.
This can be done simply by putting height: auto and min-height: 100%. I added this to a wrapper so you where not directly styling the body. Here is a JSFIDDLE, but also here is the code I used:
html, body {
margin: 0;
height: 100%;
min-height: 100%;
position: relative;
}
#wrapper {
border-image: webkit-linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40% repeat;
border-image: moz-linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40% repeat;
border-image: o-linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40% repeat;
border-image: ms-linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40% repeat;
border-image: linear-gradient(rgba(248,80,50,1), rgba(255,153,51,1)) 40% repeat;
border-width: 10px;
}
.content{
height: auto;
width: 100%;
margin: 10px auto;
min-height: 100%;
}
P.S. I also made it so the gradient will work on all browsers.
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>
I'm trying to add a stylish "wave" element to the top of a div, however with my attempts, the svg moves from its position and leaves a gap when the browser resizes.
Here's a mockup of what it should look like:
CSS:
.wave {
position: absolute;
top: -72px;
}
.container {
background: #eee;
}
.col-1 {
height: 200px;
}
.col-2 {
position: relative;
background: #fff;
height: 100px;
width: 100%;
margin-top: 100px;
}
My other attempt was using background-image: url(wave.svg); in a :after selector, but same results.
Here's a codepen:
https://codepen.io/anon/pen/LmRyLK
How can I get the wave to keep put as is when it's resizing and when it's not?
Set your SVG as a background image on the element where you have your funky purple bit, you can stack the background images on each other, like so:
.purpleElement{
background: url("/path/to/asset/image.svg") bottom center no-repeat, purple;
background-size: 100%;
/*I've set a height here to replicate content*/
height: 70vh;
width: 100%;
}
I've forked off your codepen to show what will happen
I need body to have a silver background and fill only 75% of the page. That is, only 75% of the page is painted silver, while the remaining part is unused and painted according to broswer's defaults. The left part of the page is my BODY, the right part is unused. I tried
body {
background-color: silver;
width: 75%;
}
But still the whole page is painted silver. How can I accomplish my task?
You would need to set the background color for both html and body.
In addition you have set a height of 100% to the html element and a min-height of 100% or 100vh to the body so that it will alway fill the whole height of the screen.
The padding: 0 and margin: 0 are important so that you won't have a border between your body and the window.
But be award that this will work only for modern browsers. I can't test older browsers right now, but it would assume that this will have problems with in IE below the version 9 or 10.
So if you want to support older browsers too, then you would need to use the solutions provided by the other answer and use a div as container for your content.
html {
background-color: white;
height: 100%;
padding: 0;
}
body {
background-color: silver;
width: 75%;
min-height: 100%;
margin: 0;
}
div {
height: 500px;
width: 50px;
background-color: red;
}
<div>
test
</div>
Thats not how it Works.
U might use a container as
<div id="container"></div>
#container{
background-color: silver;
width: 75%;
}
You have to use a container div for this purpose:
body {
padding: 0;
margin: 0;
}
div {
min-height: 100vh;
background-color: silver;
width: 75%;
}
<div></div>
Another approach (if you don't need the right border for the content) would be to use background gradients:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: -webkit-linear-gradient(left, silver 0%, silver 75%, white 75%);
background: linear-gradient(to right, silver 0%, silver 75%, white 75%);
}
I'm trying to use webkit-mask-size to make a mask image smaller. Like this:
.myClass {
width: 100%;
height: 100%;
background: #ffffff;
-webkit-mask-size: 50% 50%;
-webkit-mask: url(../css/images/myimage.png) center center;
}
The div which has myClass applied to it has a parent container which has a fixed height set on it.
Whatever I set -webkit-mask-size to it makes no difference.
Just swap the order:
.myClass {
width: 100%;
height: 100%;
background: #ffffff;
-webkit-mask: url(../css/images/myimage.png) center center;
-webkit-mask-size: 50% 50%;
}
When you specify the whole property, -webkit-mask, it contains values for all the subproperties, so it resets the -webkit-mask-size.
If you set that the last, that won't happen.
Alternatively, specify the subproperties individually (image, position, size ...)
Hmm. I think it might be that center center after your webkit mask url. Also you should set a webkit-mask-position. Take a look at this code:
.myClass {
width: 100%;
height: 100%;
background: red;
/*-webkit-mask-size: 50% 50%;*/
-webkit-mask-position: 0 0;
-webkit-mask-size: 200px 200px;
-webkit-mask-image: url(https://dl.dropboxusercontent.com/u/535060/mask.png);
}
It works for me... Here is the fiddle: http://jsfiddle.net/U9axq/
I have a footer that is 1024px in width with a background image 1024px by 482px.
I want to put an x-repeating background to the left of it and an x-repeating background to the right of it. How do I do this?
This is what I have:
.footer {
background:
url("footerleft-bg.png") repeat-x,
url("footerright-bg.png") repeat-x 0 0 #fff;
height:482px;
width:100%;
}
But it makes the left background image completely cover the right one.
You could do it like this:
demo
footer {
position: absolute;
bottom: 0;
width: 100%;
min-height: 10em;
background: black;
}
footer:before, footer:after {
position: absolute;
top: 5%; bottom: 5%;
width: 40%;
background-repeat: repeat-x;
background-size: 1px 100%;
content: '';
}
footer:before { left: 5%; background-image: linear-gradient(crimson, black); }
footer:after { right: 5%; background-image: linear-gradient(black, dodgerblue); }
However, there is no way to do it without using nested elements or pseudo-elements. A background repeats itself or it doesn't. It doesn't repeat itself just on an interval from point A to point B (though I would sometimes find that useful as well).
CSS2 does not support multiple background images. You'll need to nest another HTML element to make this work.
See: http://www.quirksmode.org/css/multiple_backgrounds.html