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;
}
Related
Before any thing thanks for pay attencion to me.
I just want to make a grandient.
So in HTML i have create a div simple as that.
Code:
body {
}
.containerallbody {
width: 800px;
height: 300px;
background-color: #0076b4;
background-image: -moz-linear-gradient (top, #0076b4 0%, white 100%);
background-image: -webkit-linear-gradient (top, #0076b4 0%, white 100%);
background-image: linear-gradient (top, #0076b4 0%, white 100%); /*STANDARD*/
}
<body>
<div class="containerallbody">
</div>
</body>
I have try Safari, Chrome, Firefox and IE.
I Try also every thing that shows on w3scholls.
And i have seen a lots of videos on youtube talking about this, i dont know what to do more. I just want a simple background cover all the body with a linear grandient from blue to white.
Can anyone save me please?
You have an extra space after the linear-gradient.
body {
}
.containerallbody {
width: 800px;
height: 300px;
background-color: #0076b4;
background-image: -moz-linear-gradient(top, #0076b4 0%, white 100%);
background-image: -webkit-linear-gradient(top, #0076b4 0%, white 100%);
background-image: linear-gradient(top, #0076b4 0%, white 100%); /*STANDARD*/
}
<body>
<div class="containerallbody">
</div>
</body>
is it possible to colour only half a div white from the left and the other side green? I want to do this on the 19th date in this graphic
td.specialDate:first-of-type {
background-image: linear-gradient(left, lightgreen, lightgreen 50%, transparent 50%, transparent 100%);
background-image: -webkit-linear-gradient(left, lightgreen, lightgreen 50%, transparent 50%, transparent 100%);
}
try something like this:
background: green;
background: -moz-linear-gradient(left, green 0%, white 50%);
background: -webkit-linear-gradient(left, green 0%, white 50%);
background: linear-gradient(to right, green 0%, white 50%);
Here a link to a code sample on CodePen
You can go crazy with gradients on this nice website
EDIT
If you want to color exactly half of the div, w/o the shade/gradient, use this code:
background: green;
background: -moz-linear-gradient(left, green 50%, white 50%);
background: -webkit-linear-gradient(left, green 50%, white 50%);
background: linear-gradient(to right, green 50%, white 50%);
if you want a diagonal from bottom left to top right, use this code:
background: green;
background: -moz-linear-gradient(45deg, green 50%, white 50%);
background: -webkit-linear-gradient(45deg, green 50%, white 50%);
background: linear-gradient(45deg, green 50%, white 50%);
Check the linked Codepen sample for the updated code sample.
Yes, and you're not too far off with the gradient:
html, body {
width:100%;
height:100%;
}
div {
width:100%;
height:100%;
}
div {
background: linear-gradient(to left, lightgreen 50%, transparent 50%);
}
<div>
</div>
And here's a Fiddle as well.
Check this code.
background: -moz-linear-gradient(left, #ffffff 50%, #0f0 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 50%,#0f0 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 50%,#0f0 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
JSFIDDLE
Use this in CSS:
div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
to right,
red,
red 50%,
green 50%,
green 100%
);
}
Yes it is possible.
Here it is . You can copy the code by clicking "Copy Text" below. It's too long to post here.
I hope it helps.
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'm on my first approach with photoshop patterns.I'm buildin a webpage where I want to use my pattern to give a nice effect to my webpage background.
The pattern I found is 120x120 px
If I was done here I should use this css:
background-imag:url(mypattern.jpg);
background-repeat:repeat;
But Im not done.Id like to **add to my page's background a linear gradient(dir=top/down col=light-blue/green) with the pattern fill layer on top of it, with blending mode=darken **.
This is the final effect:
I come to the point.
QUESTION:
Combining linear vertical-gradient effect and my 120x120 pattern is it possible to find a pattern that I could use to repeat itself endlessly both vertical and horizontal??which is a common solution in this case?
Hope It's clear
thanks
Luca
or you can use background gradinent css3
body { background: url('pattern.jpg') repeat;}
#container {
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
}
to make it work in IE lte 7 add:
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFFFFFFF', EndColorStr='#00FFFFFF')
color is provided in #aarrggbb format, where aa=alpha(transparency), rest like normal hex color.
Apply
html{
background: url('mypattern.jpg') repeat;
}
body{
background: url('gradient.png') repeat-x;
width:100%;
height:100%;
}
where gradient.png is your white gradient which becomes transparent to it's bottom.
Dis will work, bg pattern with linear or radial gradient:
background-image: url(images/pattern.png), -webkit-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), -moz-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), -ms-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), -o-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), radial-gradient(circle at 30% 40%, rgb(20,150,224), rgb(0,0,0));
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