What I am trying to achieve is that I have gradient on the div background, and I am trying to add a background image over the gradient(image is just a pattern) but either only gradient is being applied or only the pattern, not both
I get a white background with this code:
#box{
padding:50px;
background:linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0% transparent url('bs-docs-masthead-pattern.png') repeat scroll center center transparent;
}
only gradient with this:
#box{
background:linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0%
}
#box:after{
background: transparent url('pattern.png') repeat scroll center center transparent;
}
what m I doing wrong?
Update your CSS like below.
#box{
background:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSXwTmM2R_vmBHFpn720_8bGOaegnP5Kawh0wb4JggN5rUALGwGvw') no-repeat center center, linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0%;
height:500px;
}
FIDDLE DEMO
add content:"" in pseudo element
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#box {
background: linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0%;
width: 100%;
height: 100%;
}
#box::after {
content: "";
background: url('http://s28.postimg.org/rfznph7ul/pattern.png');
width: 100%;
height: 100%;
display: block;
}
<div id="box"></div>
Related
I was asked with making such a background on a responsive site. I thought about preparing two divs using gradient, but it is highly problematic. Is it even possible to do it? Using this as a background-image is cumbersome for higher and lower resolutions.
Any ideas?
some clip-path and pseudo element can approximate this:
.box {
width: 300px;
aspect-ratio: .8;
position: relative;
z-index: 0;
}
.box:before,
.box:after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
}
.box:before {
clip-path: polygon(0 0, 100% 50%, 10% 100%,0 100%);
background: linear-gradient(40deg, #3185c5, #0ea1b1);
}
.box:after {
clip-path: polygon(100% 30%, 100% 50%, 10% 100%,0% 100%, 0 80%);
background: linear-gradient(40deg, #3185c5, #f55778);
}
<div class="box"></div>
I'm trying to achieve this gradient. What I don't understand is the curvature of it and I'm not sure on how to replicate it:
What I have so far:
and my code for the gradient:
radial-gradient(at top left,#629a92 36%,#02d2a0 67%, #fff 11%)
However I'm not sure how this gets stretched to the end of the screen. I haven't used radial-gradient much before so I feel like I'm missing something. Any help would be greatly appreciated. Thank you.
You need to also adjust background-size of the gradient:
body {
height:100vh;
margin:0;
background-image:radial-gradient(at top left,#629a92 36%,#02d2a0 67%, transparent 67.5%);
background-size:120% 100%;
background-repeat:no-repeat;
}
Or adjust the radius:
body {
height:100vh;
margin:0;
background-image:radial-gradient(120% 100% at top left,#629a92 61%,#02d2a0 92%, transparent 92.5%);
background-repeat:no-repeat;
}
UPDATE
If it's a linear-gradient inside a curved shape you can try to use multiple background. The idea is to create the linear-gradient and above it you add the a radial-gradient with transparent color to be able to see the first gradient.
body {
height:100vh;
margin:0;
background-image:
radial-gradient(120% 100% at top left,transparent 92%, #fff 92.5%),
linear-gradient(135deg, #51a595 0%, #3fcfa2 100%);
}
If you look carefully it is not a radial gradient. It is a linear gradient inside a radial shape. If I were you, I would do a SVG shape—mine is just for using as example—and apply it to the gradient.
Like this:
body {
margin: 0;
}
svg {
width: 0;
height: 0;
display: block;
}
.main {
width: 100%;
height: 100vh;
position: relative;
}
.main:before {
content: '';
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
background: #51a595;
background: linear-gradient(135deg, #51a595 0%, #3fcfa2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51a595', endColorstr='#54bb9b',GradientType=1 );
-webkit-clip-path: url("#mask");
clip-path: url("#mask");
}
<svg>
<defs>
<clipPath id="mask">
<ellipse cx="0" cy="-1400" rx="2200" ry="1500"></ellipse>
</clipPath>
</defs>
</svg>
<div class="main"></div>
Looking at radial-gradient on mdn, it can take 2 percentages before the at top left for its size. We can make the first larger than 100% so it will extend beyond the screen on the x axis and put the second percent to 100% so it ends at the bottom.
radial-gradient(
200% 100% at top left,
#629a92 36%,
#02d2a0 67%,
#fff 11%
);
This should result in what you are looking for
.head {
width: 100%;
height: 200px;
background: radial-gradient(
200% 100% at top left,
#629a92 36%,
#02d2a0 67%,
#fff 11%
)
}
.body {
height: 200px;
width: 100%;
}
<div class="head"></div>
<div class="body"></div>
If I have this:
https://codepen.io/anon/pen/MveydB
body {
width: 100vh; height: 100vh;
background-image: radial-gradient(circle closest-side, #00bffb, rgba(0, 0, 0, 1));
}
How I can have something like this instead?:
It's impossible to edit HTML in this case too, because it's a theme for Linux.
Cover with a linear gradient
Paint a half transparent, half black linear gradient on top of it.
.bg {
width: 100vh;
height: 100vh;
background: linear-gradient(to bottom, transparent 50%, black 50%),
radial-gradient(circle closest-side, #00bffb, black);
}
body {
margin: 0;
}
<div class="bg"></div>
Or
Cover with a pseudo element
If you want to create a radial gradient with two halves of different color, you can use a pseudo element with half the height of the parent.
.bg {
position: relative;
width: 100vh;
height: 100vh;
background: radial-gradient(circle closest-side, yellow, black);
}
.bg::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100vh;
height: 50%;
background: radial-gradient(circle closest-side, #00bffb, black);
background-size: 100% 200%; /** we need to compensate for the 50% height **/
content: '';
}
body {
margin: 0;
}
<div class="bg"></div>
Set the gradient on half of the container with background-size: 100% 50%,
Position the gradient circle so that only its top half is visible with background-image: radial-gradient(circle 50vh at 50% 100%, #00bffb, #0000);
Explanation:
circle 50vh sets the gradient radius to half the size of the container (you need to use a fixed size, thus 50vh, or 200px if your container was 400px tall — % won't work, sadly)
at 50% 100% sets the gradient center in the middle of the bottom edge of the background box.
body {
width: 100vh;
height: 100vh;
background-color: #000;
background-image: radial-gradient(circle 50vh at 50% 100%, #00bffb, #0000);
background-size: 100% 50%;
background-repeat: no-repeat;
}
https://codepen.io/hyvyys/pen/xxKRGwP
Currently working on a web design project for a client where I designed a multi-layered diagonal background. I solved a single diagonal with;
background-color: #dbebde;
background-image: -webkit-linear-gradient(120deg, #dbebde 50%, #f8f8f8 45%);
min-height: 400px;
However, as seen in the image below, I need to add a smaller diagonal on the left side.
Does anyone have an idea on how to solve this specific issue?
You can use a single HTML element, let's say a <div>, and use pseudo-elements, particularly ::before and ::after, to create those shapes, without writing additional HTML elements.
You would draw the red one first:
body {
margin: 0;
}
.fullBox {
position: relative;
height: 100vh;
}
.diagonalBox {
background: #FFF;
overflow: hidden;
}
.diagonalBox::before,
.diagonalBox::after {
content: '';
position: absolute;
width: 200%;
height: 200%;
left: 0;
}
.diagonalBox::before {
background: #D00;
top: 10%;
transform: rotate(30deg);
transform-origin: top left;
}
<div class="fullBox diagonalBox"></div>
And then add the light mint green one on top of that:
body {
margin: 0;
}
.fullBox {
position: relative;
height: 100vh;
}
.diagonalBox {
background: #FFF;
overflow: hidden;
}
.diagonalBox::before,
.diagonalBox::after {
content: '';
position: absolute;
width: 200%;
height: 200%;
left: 0;
}
.diagonalBox::before {
background: #D00;
top: 10%;
transform: rotate(30deg);
transform-origin: top left;
}
.diagonalBox::after {
background: #DFD;
top: 100%;
transform: rotate(-30deg);
transform-origin: bottom left;
}
<div class="fullBox diagonalBox"></div>
Keep in mind that your may need to adjust the dimensions and positions of the pseudo-elements.
I suggest you using 2 DIVs and give one of them a gradient with transparent color.
HTML :
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer,.inner{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}
.outer {
background-color: #dbebde;
background-image: -webkit-linear-gradient(50deg, red 70%, #f8f8f8 65%);
background-image: -moz-linear-gradient(50deg, red 70%, #f8f8f8 65%);
background-image: -o-linear-gradient(50deg, red 70%, #f8f8f8 65%);
background-image: -ms-linear-gradient(50deg, red 70%, #f8f8f8 65%);
}
.inner{
background-color: transparent;
background-image: -webkit-linear-gradient(120deg, #dbebde 60%, transparent 55%);
background-image: -moz-linear-gradient(120deg, #dbebde 60%, transparent 55%);
background-image: -o-linear-gradient(120deg, #dbebde 60%, transparent 55%);
background-image: -ms-linear-gradient(120deg, #dbebde 60%, transparent 55%);
}
You can see it in action:
https://codepen.io/FaridNaderi/pen/LLBVqw
Hope at least it helps you.
When i create background gradient like this:
background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 59%,#ededed 100%);
I get ellipse that is inside the div, and conform to shape of div. So if div is large in height then ellipse would be stretched vertically. If div is a square then ellipse would be like a circle. That's fine, i want to control height of ellipse.
The exact question can be addressed by combining the last 2 answers: circle gradient and adjusting the background size.
Something like this:
div {
width: 300px;
height: 100px;
background: radial-gradient(circle, white 0%, red 50%, black 100%);
background-size: 100% 200%;
background-position: 0% 50%;
}
<div></div>
I find it less of a hassle than nested divs, and by playing with the background-position and size values, you can get some pretty cool effects!
Use a div with overflow set to hidden, and a div inside of it absolutely positioned with a fixed height.
#outer {
height: 100px;
overflow: hidden;
position: relative;
width: 200px;
}
#inner {
background: radial-gradient(ellipse at center, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
bottom: 0;
height: 150px;
position: absolute;
width: 200px;
}
<div id="outer">
<div id="inner"></div>
</div>
You can play with the background dimensions and position:
div {
width: 300px;
height: 100px;
background: radial-gradient(ellipse at center, white 0%, red 100%);
background-size: 100% 200%;
background-position: 0% 50%;
}
demo
You can try circle instead of ellipse:
Demo on dabblet
.rect2 {
width: 600px;
height: 100px;
line-height: 100px;
text-align: center;
background: radial-gradient(circle, #ffffff 0%, #ffffff 59%, #dcdcdc 100%);
}