Related
If I have the following CSS property for my body:
body {
background-color: red;
background-image: linear-gradient(red, orange);
}
Then the gradient appears on my web page but it does not take up the full screen size (I have a big monitor). It appears as below: Is this a issue with the footer? I do not have a footer currently.
Got the same problem but only this one is working, please add this style to your css
background-attachment: fixed;
The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed. There are three values: scroll, fixed, and local. Works best with gradient background.
Check out the doc here
Try this DEMO
body, html {
height: 100%;
width: 100%;
}
body {
background: rgba(231,56,39,1);
background: -moz-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(231,56,39,1)), color-stop(27%, rgba(231,56,39,1)), color-stop(100%, rgba(255,166,0,1)));
background: -webkit-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
background: -o-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
background: -ms-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
background: linear-gradient(to bottom, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
}
The answer was actually the margin property.
body, html {
height: 100%;
width: 100%;
margin: 0;
}
I don't want to use an image for this. I want to create a line which from transparent towards solid with css. Can I? with css3 or html5 as like this;
Like this: http://codepen.io/richbradshaw/pen/uexaG
.blurred-line {
height:30px;
width:600px;
margin:0 auto;
-moz-background-image: linear-gradient(to right, transparent 0%, black 100%);
background-image: linear-gradient(to right, transparent 0%, black 100%);
border-radius:15px;
-webkit-filter:blur(1px);
}
Which renders like:
Despite what most people seem to think, that gradient syntax is the real syntax, and works in Firefox 10+, Chrome 26+, IE10+ and Safari 6 (or 7?)+.
Including all the ancient gradient stuff is a waste of time, unless you are planning to support browsers that don't exist (e.g. Chrome 10, Firefox 3.6).
I suggest you to use a horizontal linear gradient with border radius, something like:
border-radius:50px;
background:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
See this jsfiddle or the snippet below for more details.
.rounded {
height:50px;
width:80%;
border-radius:50px;
background: -webkit-gradient(linear, 100% 0, 0 0, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
background: -webkit-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -moz-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}
<div class="rounded"></div>
There is a gradient generator that i like a lot since it gives crossBrowser solution called "Ultimate CSS Gradient Generator".
Use rgba format
/* webkit example */
background-image: -webkit-gradient(
linear, left top, left bottom, from(rgba(50,50,50,0.8)),
to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
)
An example: http://nicolahibbert.com/css3-alpha-transparent-gradients/
Duplicate: CSS3 Transparency + Gradient
This tool might be helpful too: http://www.colorzilla.com/gradient-editor/
As you said "from transparent towards solid", this should be what you want:
HTML
<div class="container">
<div class="gradient">
</div>
</div>
CSS
div.container {
width: 500px;
height: 30px;
/*background-color: #791;*/ /*uncomment this property to see the transparency effect*/
padding: 10px;
}
div.gradient {
width: 100%;
height: 100%;
background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,1)); /* use vendor specific property if the standard one does not work */
border-radius: 25px;
}
You can do this with CSS3, and if you want it to look just like the image you provided, you can use some transparency and border-radius. I always found this link helpful:
I have two divs with same background color. How can I set the width of background?
Expected result:
Here is HTML:
<div>
<span>100% width of background</span>
</div>
<div>
<span>75% width of background</span>
</div>
What I tried to do using CSS:
div {
background-color: #fc0;
margin: 2px;
}
div:last-child {
background-size: 75%;
}
jsFiddle, of course.
Is it posible to do this exept of setting width of a div?
You can use background gradients with hard stops. Here I'm using custom properties on each element to dynamically set the length value. The CSS rule uses a partial attribute selector to look for the custom property in the style attribute.
div {
background-color: #fc0;
margin: 2px;
}
div[style*="--bg-length"] {
background: linear-gradient(
to right,
#fc0 var(--bg-length), /* the end of the colored segment */
transparent var(--bg-length) /* the start of the transparent segment */
);
}
<div><span>100% width of background</span></div>
<div style="--bg-length: 300px"><span>60% width of background</span></div>
<div style="--bg-length: 85%"><span>85% width of background</span></div>
<div style="--bg-length: 70vw"><span>85% width of background</span></div>
You can't do it with a simple background-color, but you can do it with a CSS gradient.
background-color is always treated as a single plain colour for the entire element, but gradients are treated as images, and can be sized. You can also do other things with gradients, such as layering multiple gradients, which can't be done with a simple background-color.
I would use a 1px image as background something like background: url(1px.png) repeat-y; then you can set background-size:75%; as it's image now. Making life easier and less/simple code as well.
you can use gradient:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY5JSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(30,87,153,1) 69%, rgba(30,87,153,0) 70%, rgba(30,87,153,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(69%,rgba(30,87,153,1)), color-stop(70%,rgba(30,87,153,0)), color-stop(100%,rgba(30,87,153,0)));
background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#001e5799',GradientType=1 );
CSS gradient generator
jsfiddle
You should change your CSS to :
div {
background-color: #fc0;
margin: 2px;
}
div:last-child {
background-image: -webkit-linear-gradient(left, #fc0, #fc0 75%, transparent 75%, transparent 100%)
}
I am using an gradient with opacity as an brightness effect for JUST my background. Now it works in Chrome and Firefox but doesn't seem to work in IE10, but I did put the -ms- version there.
Here is my JSFiddle: >>>JSFiddle<<<
Here is the code:
<div id="lol">
</div>
-
#lol {
background-image:url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
width:700px;
height:465px;
}
#lol:hover {
background: -moz-linear-gradient(top, rgba(255,255,255,.1) 0%, rgba(255,255,255,.1) 100%), url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.1)), color-stop(100%,rgba(255,255,255,.1))), url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
background: -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(255,255,255,.1) 100%), url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
background: -o-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(255,255,255,.1) 100%), url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
background: -ms-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(255,255,255,.1) 100%), url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
background: linear-gradient(to bottom, rgba(255,255,255,.1) 0%,rgba(255,255,255,.1) 100%), url('http://www.gettyimages.com/CMS/Pages/PhotoDiscFrontdoor/StaticContent/fd_image_test.jpg');
}
Does anyone know what is wrong with this code? Why doesn't it work in Internet Explorer 10?
Thanks in advance.
I want to have a gradient in HTML/CSS.
Assume some DIV is always more than 400px tall. I want to add the gradient so that it is #FFFFFF at the top and #EEEEEE at 300px. So the first 300px (height-wise) is a nice 'white to grey' gradient. After 300px, regardless of how tall the DIV goes, I want the background color to stay #EEEEEE.
I guess this has something to do with gradient stops (?)
How can I do it?
P.S. If it is not possible in IE I don't care. I am fine if gecko and webkit browsers show this properly.
background-color: #eee;
background-image: linear-gradient(top, #fff 0%, #eee 300px); /* W3C */
background-image: -moz-linear-gradient(top, #fff 0%, #eee 300px); /* FF3.6+ */
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 300px); /* Chrome10+,Safari5.1+ */
This is according to the current Mozilla documentation: https://developer.mozilla.org/en/CSS/-moz-linear-gradient.
I've confirmed that it works in Firefox 3.6 and Chrome 15.
Alternative way
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
background-repeat:no-repeat;
background-size:100% 300px;
height: 400px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
You might have to play with 0.75 as it's a percentage of your height, but that should do the trick.
First, it's good to know that you can use more than 2 color-stop on gradients, but you can't use fixed pixels as coordinates, it has to be a percentage.
In your case, you can simply define your first color-stop at 0% and the second one at 50% or so. I suggest you to use a gradient generator because the implementation depends on the browser.
I came up with
background: #FFFFFF; /* old browsers*/
background: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 50%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(50%,#EEEEEE)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EEEEEE', GradientType=0); /* ie */
background: -moz-linear-gradient(top, #d7d7d7 0px, #f3f3f3 178px);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,#d7d7d7), color-stop(178px,#f3f3f3));
background: -webkit-linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
background: -o-linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
background: -ms-linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
background: linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
this works for me
The easiest solution for the problem is to simply use multiple backgrounds and give the gradient part of the background a defined size, either in percentage or in pixels.
body {
background: linear-gradient(to right, green 0%, blue 100%), green;
background-size: 100px 100%, 100%;
background-repeat: no-repeat;
background-position: right;
}
html,
body {
height: 100%;
margin: 0;
}
Mix and match with browser prefixes as necessary.
You could do a:
<div id="bgGen"></div>
then
#bgGen{
height: 400px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
margin-bottom:-400px;
}
It is kinda cheating, but it works...
I had the same thing just now. I wanted to put a gradient on the main content div which varied significantly in height from page to page.
I ended up with this and it works great (and not too much extra code).
CSS:
.main-container {
position: relative;
width: 100%;
}
.gradient-container {
/* gradient code from 0% to 100% -- from colorzilla.com */
height: 115px; /* sets the height of my gradient in pixels */
position: absolute; /* so that it doesn't ruin the flow of content */
width: 100%;
}
.content-container {
position: relative;
width: 100%;
}
HTML:
<div class="main-container">
<div class="gradient-container"></div> <!-- the only thing added for gradient -->
<div class="content-container">
<!-- the rest of my page content goes here -->
</div>
</div>
I highly recommend using colorzilla's gradient-editor to generate the CSS. It makes cross-browser optimizing really easy (especially if you're used to Photoshop or Fireworks).
this worked for me
background: rgb(238, 239, 240) rgb(192, 193, 194) 400px;
background: -webkit-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background: -moz-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background: linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background-repeat:repeat-x; background-color:#eeeff0;
Also someone commented why not just make a gradient image and set it as the background. I prefer to go mostly css now too, with mobile design and limited data usage for visitors, try to limit as much images as possible. If it can be done with css than do it