I've been trying to create a radial background, except for some reason all I can get is a line. I have no idea what I'm doing wrong, any ideas?
Jsfiddle: http://jsfiddle.net/3QSFj/1/
CSS:
background: -webkit-gradient(radial, circle, 0, circle, 70, color-stop(0%, #718aa7), color-stop(70%, #203044));
background: -webkit-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: -moz-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: -o-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: radial-gradient(circle, #718aa7 0%, #203044 70%);
Set your body height to 100%, your body element is empty, and thus it doesn't have any height, the background is simply repeated there.. Bad Demo
html, body {
height: 100%;
}
Demo
Also, you background will be repeated, so you will need background-attachment: fixed; as well as background-repeat: no-repeat
Demo 2
Related
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 ;)
On a wordpress website, i would like to make a header with a gradient which covers the menu in 100% but then in the breadcrumbs i would like it to be white triangle shape.
I have create a fiddle as it is quite hard to explain.
https://jsfiddle.net/hoststage/o04qfpr9/
The body CSS and the CSS class triangle header is what i'm currently running to make it work but with negative margin which I really don't like.
body {
background-color: #F4F4F4;
background-image: -moz-linear-gradient( 97deg, rgb(145,79,145) 0%, rgb(168,100,168) 100%);
background-image: -webkit-linear-gradient( 97deg, rgb(145,79,145) 0%, rgb(168,100,168) 100%);
background-image: -ms-linear-gradient( 97deg, rgb(145,79,145) 0%, rgb(168,100,168) 100%);
position: absolute;
z-index: 270;
background-repeat: no-repeat !important;
background-size:1920px 270px;
background-position: center top;
}
.triangle-header {
width:1920px !important;
height:195px;
background: linear-gradient(to top left, white 50%, transparent 0%),
transparent 0%;
margin-top: -170px
}
SO basically, i would like to start the triangle at 46% of the body gradient and merge the 2 CSS codes into the body class.
The onecodebody is my current attempt at merging the 2 properties but it doesn't work as I suspect i can't pass the argument to the bottom left inside an already defined linear.
Is there a way to define one gradient property for the body tag which would make it look like what I have in my fiddle?
Great day to you all!
Use multiple gradient like this to have transparency:
body {
height:200px;
background:
linear-gradient(rgb(145,79,145),rgb(145,79,145)) top/100% 46% no-repeat,
linear-gradient(to bottom right,rgb(145,79,145) 50%,transparent 50.5%) bottom/100% 55% no-repeat;
}
Or like this if you want to keep both colors and have the white part above to create the triangle shape:
body {
height:200px;
background:
linear-gradient(to bottom right,transparent 50%,white 50.5%) bottom/100% 55% no-repeat,
linear-gradient(97deg, rgb(145,79,145) 0%, rgb(168,100,168) 100%) top/100% 100% no-repeat;
}
I am aware that you can set the width of a linear gradient using
.grey-block { background: linear-gradient(to right, #f9f9f9 0%, #f9f9f9 35%, white 35%, white 100%); }
As well as the height
.grey-block { background: linear-gradient(to bottom, #f9f9f9 0%, #f9f9f9 65%, white 65%, white 100%); }
However, is there a way you can set BOTH the height and the width using a the same css line?
To clarify, the code in the question is not setting the height and width of the gradient. It's adjusting the color stops, which results in a grey rectangle.
In order to adjust the actual dimensions of the gradient, we need to use the background-size property (as well as background-repeat) to set the height and width of the gradient.
With background-size in control of the gradient's dimensions, we can rewrite the CSS to be as follows:
.grey-block {
background-color: white;
background-image: linear-gradient(#f9f9f9, #f9f9f9);
background-size: 35% 65%;
background-repeat: no-repeat;
}
What's happening is that we're defining a "gradient" of a solid color and confining it's size. The background-repeat is disabled so that it will only render a single grey block.
.grey-block {
background-color: white;
background-image: linear-gradient(#f9f9f9, #f9f9f9);
background-size: 35% 65%;
background-repeat: no-repeat;
}
/* non-relevant styles */
body {
background-color: #222;
}
.grey-block {
height: 200px;
width: 200px;
}
<div class="grey-block"></div>
You can specify an angle. That should do the trick.
.grey-block { background: linear-gradient( 135deg, #f9f9f9 0%, #f9f9f9 65%, white 65%, white 100%); }
I've got a background image where the top row of pixels is a solid colour (it's a photo of a landscape). The idea would be to have this at the bottom of the page and then a CSS gradient above it that will stretch from the top of the page, stopping at the height of the image. There are lots of tutorials showing how to overlay/underlay the gradient, but they all assume that you want a full page gradient or the gradient overlaid on top of the background image.
What I have now is:
background: rgba(30, 53, 192, 1);
background: url("myimage.jpg") no-repeat center bottom, -moz-linear-gradient(top, #000 0%, #1E35C0 100%);
background: url("myimage.jpg") no-repeat center bottom, -webkit-gradient(linear, 0% 0%,0% 100%, from(#000), to(#1E35C0));
background: url("myimage.jpg") no-repeat center bottom, -webkit-linear-gradient(top, #000 0%,#1E35C0 100%);
background: url("myimage.jpg") no-repeat center bottom, -o-linear-gradient(top, #000 0%,#1E35C0 100%);
background: url("myimage.jpg") no-repeat center bottom, -ms-linear-gradient(top, #000 0%,#1E35C0 100%);
background: url("myimage.jpg") no-repeat center bottom, linear-gradient(top, #000 0%, #1E35C0 100%);
background-size: contain;
This has almost the desired effect. The CSS gradient is fine and the image is in the right place, but I don't know how to make the gradient stop above the image in a way that's nice and responsive. I can play with the percentages, but again, that only works if I know how tall the image is.
I know this is probably fairly easy in javascript, but I was hoping there's a clean CSS way to do it.
Assuming that your image has an aspect ratio of 4:1 (i.e. height is 25% of width), you can do this:
html, body {
margin: 0;
height: 100%;
}
body {
background-color: #ccc;
background-image: url("http://ima.gs/transparent/000/000/200%C3%9750-200x50.png")
, linear-gradient(to top, transparent 25vw, #fff 25vw, #00f 100%);
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain;
}
The vw unit there in the gradient means percent of viewport width. So if the background image will stretch the full width of the viewport, and its height is 25% of its width, then its height will be equal to 25vw and you can start the gradient at 25vw from the bottom, and end at the page top.
http://jsfiddle.net/8a5L20h4/
I am making a background in the body element but when I make a background it uses the window height (only the visible height) and if the user scrolls the page down the background repeats it self. If I use no-repeat the rest of the page is in solid color.
I have used background-size: 100% 100%; but still not working.
I only want a background that goes from #ccc to #000 and fills the entire page without repeating itself.....
Can anyone be so kind and help me? Thanks in advanced!
EDIT:
My code is:
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background: rgb(204,204,204);
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#000000',GradientType=0 );
}
LAST EDIT:
body {
background: #000;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
}
note: The best solution I found. When I scroll the window you can see the background color because the background-image does not repeat and as the background-image ends with the same background color everything is ok!
Unfortunately, you cannot stretch out background images, so what you are seeing is actually what you're supposed to see. Normally when sites use gradients as background images, they make it so the top of the gradient is flush with the top of the screen by setting background-position: 0 0, the gradient repeats itself horizontally by setting background-repeat: no-repeat, and then they set the background-color of the site to be the same color as the bottom of the gradient.
There are ways using CSS3 and filters in which you can create gradients for users, but there is a limited amount of browser-compatibility for these features. Here is a fiddle containing a gradient: http://jsfiddle.net/Wexcode/qhMx9/. See this article for more information about those features.