I'm trying to make a gradient background for my website, http://www.lathamcity.com
The problem is, as you can see, it just repeats the blue and cyan a bunch of times instead of making a gradient out of them.
To add to the mystery, when two links are clicked on to open a third div, the gradient suddenly changes. The third div extends below the second one, and the distance between them is occupied by the first gradient color and the rest up to the top of the page is just a normal gradient.
Here's the code I'm using for the gradients.
body{
background-color: #1B0D70;
background-image: linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -o-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -moz-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -webkit-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -ms-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.49, rgb(214,231,232)),
color-stop(0.75, rgb(36,155,171))
);
}
Currently your body height is 0px because your most of the element are absolute position.
Write this in your css:
html, body{
height:100%;
}
Related
I need to have a background with CSS as the image attached back I can't make it work with linear-gradient.
I was trying with the following but I am unable to create just 1 white stripe.
div {
background: #5cbcb0;
background: linear-gradient(120deg, #5cbcb0 10%, #ffffff 10%, #ffffff 27%, #5cbcb0 27%, #5cbcb0 50%, #5cbcb0 50%, #5cbcb0 74.81%, #ffffff 73.81%, #ffffff 76.19%, #5cbcb0 76.19%, #5cbcb0 100%);
background-size: 593.97px 593.97px;
}
<div style="height: 200px;"></div>
You just need to provide correct start and stop values for the colors. The occurrence of the multiple white stripes were due to the multiple #fff values that were used after 73.81%.
div {
background: linear-gradient(135deg, #5cbcb0 5%, #ffffff 5%, #ffffff 15%, #5cbcb0 15%);
/* Start #5cbcb0 from 0 and end at 5%, Start #fff at 5% and end at 15%, Start #5cbcb0 again at 15% and end at 100% */
background-size: 593.97px 593.97px;
background-repeat: no-repeat; /* To avoid multiple instances */
}
<div style="height: 200px;"></div>
Try adding no-repeat if that helps check snippet.
div {
background: #5cbcb0;
background: linear-gradient(120deg, #5cbcb0 10%, #ffffff 10%, #ffffff 30%, #5cbcb0 27%, #5cbcb0 50%, #5cbcb0 50%, #5cbcb0 100%, #ffffff 73.81%, #ffffff 76.19%, #5cbcb0 100%, #5cbcb0 100%) no-repeat;
background-size: 593.97px 593.97px;
}
<div style="height: 800px;"></div>
You can try it like below. I defined the size in percentage so it will be responsive.
body {
background:
linear-gradient(to bottom right, #5cbcb0 15%,#fff 15.5% 49.5%,transparent 50%) top left/30% 80% no-repeat,
#5cbcb0;
margin:0;
height:100vh;
}
If you want a static version simply use pixel values:
body {
background:
linear-gradient(to bottom right, #5cbcb0 15%,#fff 15.5% 49.5%,transparent 50%) top left/200px 200px no-repeat,
#5cbcb0;
margin:0;
height:100vh;
}
Be careful with CSS!
The extra stripes remark that you did not just create 3 shapes, but another shape as well. If you want to create just 3 shapes, you only need 4 values instead of more.
So this will work:
div {
background: #5cbcb0;
background: linear-gradient(120deg, #5cbcb0 5%, #ffffff 5%, #ffffff 15%, #5cbcb0 15%);
background-size: 593.97px 593.97px;
background-repeat: no-repeat;
}
<div style="height: 200px;"></div>
So you just need 4 values for that. Yes, this is a repeat of the top answer, but this gives what actually is going on here. So to avoid multiple instances, use no-repeat and it would work because if you remove that it will show multiple instances, if you try. Also, you can remove the height: 200px and move it to the div class to avoid inline styling. It works with 135 degrees also, so 120 is not a "special" number in which case this works. And also, you don't want it to show more than 1 white stripe so that's why I put up background-repeat: no-repeat.
I'm trying to create a gradient based sunset effect on my website's background.
Example Link (with sunset effect, in the background) https://web.archive.org/web/20161017071941/https://www.embroideryaffair.com/about/
Try to scroll down on the example link & you will notice the "sunset" effect.
This is what I've achieved so far: https://sirsakisan101.provenreviews.com/
I was able to display the two palm images, side-by-side, by using the following code.
body {
background-image: url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/left.png), url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/right.png), url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/sunsetbgbottom.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-attachment: fixed, fixed;
background-position: left top, right top, bottom;
}
Now, I'm trying to use the following code (mentioned below) for achieving the sunset effect on my background images, but it is not working. I've also tried removing the "before" element & adding the background images, along with gradients but then, it is appearing above the background images.
body:before {
background: linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -o-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -moz-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -webkit-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -ms-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#012c57', endColorstr='#ffcb70');
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,203,112)), color-stop(0.3, rgb(107,138,169)), color-stop(1, rgb(205,217,230)) ) !important;
}
I want to display this code behind my background images, to achieve the sunset effect from the example website. I can't understand why it is not working. I will be grateful for any help.
Thank You.
You can do it with another html element inside the background image one.
<div> // has your background image
<div class="gradient"> // will have the gradiant style
</div>
</div>
css
.gradient {
background: linear-gradient( rgba(255,255,255,0.23) 0%, rgba(164,49,34, .85) 100%);
}
Here is an example fiddle
Note i just simplified the gradient css. Keep your own styling.
Consider the way you use the body tag like you currently do. You need to make sure the div inside (with the gradient) spans directly on top of the other div. Maybe you have to do something like
.parent {
// The element with the image
position: relative;
}
.child {
// the element with the gradient
position absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
You can directly add the gradient to the other background-images (since the gradient property is considered a background image) like this:
body {
background-image: url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/left.png),
url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/right.png),
url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/sunsetbgbottom.png),
-webkit-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
}
That worked for me and it's much easier than adding additional elements ;)
Is there possibility to achieve it only with gradient property?
How it should look like:
I've tried this but it does not split it correctly.
#mixin content-cropped-shape($color, $color2){
background: $color;
background: linear-gradient(135deg,$color 0%, $color 50%, $color2 50%, $color2 100%);
}
Yes, you can do. With 'to right bottom' and remove the angle.
div {
background: rgb(255,255,255);
background: linear-gradient(to right bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,0,4,1) 50%,rgba(249,0,4,1) 100%);
height:200px;
}
<div>
</div>
My question is this: How can i make my 2 background images appear to the right and left above a CSS gradient. I'm working on a Joomla website using the JA Elastica template (modifying the default CSS).
In my current CSS if i put the "background: url('images')" above the gradient, then it shows the images but not the gradient and if i put it below the gradient it shows the gradient but not the images.
The code i'm currently using is this:
body#bd {
background-image: linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -o-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -moz-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -webkit-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -ms-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(142,210,46)),
color-stop(0.51, rgb(171,252,74)),
color-stop(0.76, rgb(206,255,104)));
background:
url('https://dl.dropbox.com/u/6512758/onebeat.ro/right.png') no-repeat top right,
url('https://dl.dropbox.com/u/6512758/onebeat.ro/left.png') no-repeat top left;
}
Everything needs to be on the same background-image property otherwise the previous background statement will be replaced by the next one. For example:
background-image: url('https://dl.dropbox.com/u/6512758/onebeat.ro/right.png') no-repeat top right, linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
Check here for more examples:
How do I combine a background-image and CSS3 gradient on the same element?
I have a div which is a wrapper of my half website and on the left side there's a category list. The wrapper itself is in grey color.
What I want is that it would switch from grey color to white. Here's an example image how I'd like it to be:
Is there a solution to this?
EDIT
If it will be of any help here's my wrapper's css:
#wrapper{
width: 980px;
margin: 0 auto;
background: #f3f3f3;
}
If I understand you correctly, you're looking for a way to add a gradient. Below you find the CSS for a gradient going from left to right with the colors #FFFFFF to #F3F3F3.
Please be aware, that gradients haven't been standardized yet, and many browsers have their own implementiation. This is why there are multiple directives (prefixed -o- for Opera, -moz- for Mozilla, etc.):
#wrapper {
...
background-image:
linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);
background-image:
-o-linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);
background-image:
-moz-linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);
background-image:
-webkit-linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);
background-image:
-ms-linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.35, rgb(255,255,255)),
color-stop(0.84, rgb(243,243,243))
);
}
Here's a convenient CSS Gradient Generator
What you need are gradients.
Try this generator or just read about them