The title prettymuch says it all. The first picture below is a screenshot when the whole page is about 8000 pixels tall, taken in the latest version of Chrome:
while this picture is for a different page (using the same CSS) which is about 800 pixels tall:
and here is the code:
body{
background-color: #f3ffff;
margin:0px;
background-image: url('/media/flourish.png'),
-webkit-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url('/media/flourish.png'),
-moz-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url('/media/flourish.png'),
-o-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}
The gradient is meant to cut off at 250px from the top of the page. The fact that the degree of banding seems to depend on the total height of the page is very strange: pages of heights in between these two (800px and 8000px) seem to have bands which are smaller than the first example but still noticeable.
Interestingly, I was previously using -webkit-gradient('linear'...) instead and that did not have the same problem; I only swapped over to -webkit-linear-gradient so it would fall in line with my -moz and -o gradients.
I haven't tried it on Safari, but the code above makes it work perfectly fine in Firefox and kind-of-work in Opera (the colors get messed up, but the gradient is still smooth). Nevermind IE, which i have given up on.
Has anyone else seen this before?
Update: This happens on my Mac's Chrome/Safari too, but the bands are about 1/3 the size of the bands shown in the top image, for the exact same page. The banding is identical in both OSX Chrome and OSX Safari.
1/3 the size is still noticeable, but not quite so jarring. The actual page is at http://www.techcreation.sg/page/web/Intro%20to%20XTags/, if you want to see for yourself in some other browser. The CSS is "inline" css compiled in-browser using less.js.
Looks like a webkit bug. I came up with the work-around below, tested on the latest Chrome and FF. In short, you'll position a div containing the background behind your main content. I also added a few styles to make IE happier.
Given this HTML:
<html lang="en">
<head>
<style>
...
</style>
</head>
<body>
<div class="background">bgdiv</div>
<div class="content_pane">
<div class="titlebar">Leave a Comment!</div>
<div class="comment">Your Comment.</div>
</div>
</body>
</html>
Combined with this stylesheet:
body{
background-color: #f3ffff;
min-height: 100%;
margin:0px;
}
.background {
height: 250px;
left: 0;
position: absolute; /* could use fixed if you like. */
right: 0;
top: 0;
z-index: -10;
background-image:
-webkit-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-moz-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-o-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-ms-linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63adf1', endColorstr='#0000ffff',GradientType=0 ); /* IE6-9 */
background-image:
linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* W3C */
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
}
.content_pane {
background: white;
border: 1px dotted white;
border: 1px solid grey;
font-family: arial, sans;
font-weight: bold;
margin: 6em auto 5em;
width: 50%;
}
.titlebar {
background: #3f7cdb;
color: white;
font-family: arial, sans;
padding: .25em 2ex .25em;
}
.comment {
padding: 1em;
}
It should come out looking like this, regardless of window size:
Your demo link does not work but i did some tests and it worked fine for me using Chrome when you add width/height of 100% to the body/html elements, like so:
body, html {
width:100%;
height:100%;
}
Demo
You can try that or you can just declare a header/logo piece where you can add the starting gradient and just add the ending gradient to the body of your css so it blends in correctly, like so:
CSS
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
body {
background-color: #f3ffff;
margin:0px;
height:10000px;
}
.header {
height:300px;
width:100%;
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-webkit-linear-gradient(top, rgba(99, 173, 241, 1), rgba(0, 255, 255, 0));
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-moz-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px
);
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-o-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px);
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
background-size:auto;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}
HTML
<div class="header">
content
</div>
Demo
Friendly note: For anybody looking for the issue you can see it happening here in Chrome: http://jsfiddle.net/skJGG/
Seems like Chrome has some bugs when using the rgba() values. I tried with normal hex values and it seems to fix the problem for me.
Look here if it fix it for you also.
Edit
Looks like the problem is in the 250px limit because it only appears when that is set.
I didn't manage to come up with a better solution than this one.
Overlapping a div with the gradient you like, 250px tall. Then you can have the page as tall as you want because the div will always be 250px tall.
Webkit render -webkit-gradient('linear'...) and webkit-linear-gradient in the same way. The problem is with your multiple backgrounds. I had same issue and I was ended with two different elements on top of each other and then giving a background to each of them. Something like:
<body>
<div class="body-overlay"<div>
</body>
CSS
body{-webkit-linear-gradient(...)}
.body-overlay{background:url('blah.png')}
I think this happens because the image have fixed amount of pixels
instead of using background-image, try using this(background) -
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63adf1), color-stop(53%,#ffffff), color-stop(100%,#ffffff)); /* feel free to play with the % values to get what you are looking for */
and also use hex values always. But from an UX prospective it would be better to use as in image(since you are loading an image anyway) and you won't have to worry about cross browser compatibility.
Have you tried setting background-size: auto, 250px 250px; — auto for first image and 250px for your gradient.
When you don't need a gradient image so big that it would cover whole page it's best to limit it's size. Besides rendering problems with big images, I think that it's better for the browser's performance.
So, you example would look like http://jsfiddle.net/kizu/phPSb/ (blindcoded, couldn't reproduce the problem though).
In any strange situation try to use:
transform: translateZ(10px);
In my case was the height of the body. Try the following:
body {
width:100vw;
height:100vh;
...
}
Related
I have a page that has a background picture that works fine on scroll, but I also want to add a semi-transparent overlay.
I have tried to do this by wrapping the background in a span container. The problem is that it's a page that users can add to, and when there is enough content that the user needs to scroll, the transparent background only covers the first page.
I've tried background-attachment: fixed; background-size: cover; but none of them work.
You see where the overlay stops in this screenshot
Relevant CSS:
body {
background-image: url(images/ocoast.jpg);
background-size: cover;
}
.totalqs {
background-color:rgba(0,0,0,0.3);
color: white;
text-align: center;
float: left;
height: 100%;
width: 100%;
}
PHP page, test.php
<html>
<head><title>All Questions</title><link rel="stylesheet" type="text/css" href="style2.css">
</head>
<span class ="totalqs"><body>
<center><div class="navbar"><a href= 'ask.php'>Ask a Question</a>
<a href='test.php'>Answer a Question</a>
<a href= 'search.html'>Search</a>
<a href= 'yourqs.php'>Your Questions</a>
<a href= 'index.html'>Log out</a>
<hr><hr></center>
<br /> <br /><br /><br /><br /><br />
<h1><u>Every Question Ever Asked</u></h1>
<p><u><b>Hello <?php echo $username; ?> Answer Another Users Question: </u></b><br><br /></p>
<?php
/*
Get the questions from the database here and display them -
removed from question because its not relevant to the problem
*/
?>
<br /><br />
</body></span>
</html>
What can I do to make the overlay fill the whole background?
I see now that the problem you are having is getting the element with the transparent overlay to fill the screen.
Instead of using a separate element, you can add a transparent overlay on the body element itself by faking it with a gradient Ref: CSS Tricks, e.g.
body {
background:
/* top: transparent grey, faked with gradient */
linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
/* bottom: image */
url(images/ocoast.jpg) no-repeat;
background-size: cover;
}
This does away with the need for a separate element altogether. You can apply the other styles (e.g. color: white) directly the body, or you can create a <div class="container"> element (inside the <body>!) if you prefer.
Working snippet - I made the overlay green, so it was obvious that it was covering the whole area):
body {
/* BACKGROUND */
background: /* top: transparent colour, faked with gradient */
linear-gradient( rgba(0, 255, 0, 0.3), rgba(0, 255, 0, 0.3)), /* bottom: image */
url(http://oi67.tinypic.com/28a11js.jpg) no-repeat center top;
background-size: cover;
/* CONTENT */
color: white;
text-align: center;
}
/* for testing only: add big vertical margin to make page scroll */
p { margin: 100px 0; }
<body class="backimg">
<div class="navbar"><a href='ask.php'>Ask a Question</a>
<a href='test.php'>Answer a Question</a>
<a href='search.html'>Search</a>
<a href='yourqs.php'>Your Questions</a>
<a href='index.html'>Log out</a>
</div>
<hr><hr>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
</body>
NOTE: FYI Your HTML is not valid - you can't have any elements outside the <body> tags. Also <center> is deprecated, its not causing the problem but you should change it anyway - use the text-align: center style instead.
UPDATE
Add overlay to specific pages only, or had different colours one each page
If you want to add an overlay to specific pages, you can do this in the same way but using classes. You could also do this to add different colours to different pages if you wanted!
Add the CSS to the class instead of the <body> element
In your HTML, add a class to the body element
Then add the corresponding class to the <body> of each page! So for example:
1. CSS
Create CSS classes for each different background you want to use:
/* This will only contain the CSS that applies to all pages, e.g. */
body{text-align: center;}
/* Set up the different classes you will use, e.g. these are for green and blue overlays: */
body.greenoverlay{
background: /* top: transparent colour, faked with gradient */
linear-gradient( rgba(0, 255, 0, 0.3), rgba(0, 255, 0, 0.3)), /* bottom: image */
url(http://oi67.tinypic.com/28a11js.jpg) no-repeat center top;
background-size: cover;
color: white;
}
body.blueoverlay{
background: /* top: transparent colour, faked with gradient */
linear-gradient( rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.3)), /* bottom: image */
url(http://oi67.tinypic.com/28a11js.jpg) no-repeat center top;
background-size: cover;
color: white;
}
2. HTML
Add the right class to the body of each page, do for example:
No overlay: <body>
Green overlay: <body class="green-overlay">
Blue overlay: <body class="blue-overlay">
FYI, because we are using linear-gradient to fake a solid background colour, you can create all sorts of gradient and colour effects. Run this snippet to see what I mean (I don't suggest you use it! but it shows the what you can do):
body.rainbowoverlay {
background: /* top: transparent colour, faked with gradient */
linear-gradient(to right, rgba(255, 50, 50, 0.5) 0%, rgba(255, 50, 50, 0.5) 1%, rgba(255, 248, 50, 0.5) 35%, rgba(71, 255, 50, 0.5) 56%, rgba(137, 163, 255, 0.5) 79%, rgba(237, 137, 255, 0.5) 100%), /* bottom: image */
url(http://oi67.tinypic.com/28a11js.jpg) no-repeat center top;
background-size: cover;
color: white;
}
<body class="rainbowoverlay">
<p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p>
<p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p>
</body>
You can use this gradient generator to generate the CSS for the linear-gradient in your CSS:
http://colorzilla.com/gradient-editor/#ff3232+1,fff832+35,47ff32+56,89a3ff+79,ed89ff+100&0.5+0,0.5
I'm trying to create a multiple color background to implement this:
And right now I managed to do this:
What I did:
Desired Background:
I'm trying to do it using gradients, but it seems that it's not possible to combine two gradients to do that. (It's possible to do other things, but not this).
Is there a way to implement this backgorund?
Thanks!
Try this (adjust the percentage and colors as your needs):
.yourdiv{
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 70%, #f1f1f1 70%, #f1f1f1 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0 );
}
DEMO HERE
i am guessing u need the darker grey section in the desired output to be shown? if so i would suggest to divide it into sections and give individual background.
if u can post some code. i would be happy to help.
Okay, not sure if this is exactly what you want but this is how I'd do psd to css/html. See screen shot below.
Also a WORKING DEMO HERE
Just wrap the whole card in a div and apply a left border would do the trick.
border-left-width: 8px;
border-left-color: rgba(10, 255, 80, 0.75);
border-radius: 5px;
You may remove the box shadow if you don't want, just feel move active with it.
At the end, I managed to do it with this:
This for the GREEN part:
.assignment-item {
padding: 5px 5px 0px 10px !important;
margin:15px auto;
border-radius: 8px;
background: linear-gradient(to right, #4f8b2b 0%,#4f8b2b 2%,#ffffff 2%,#ffffff 100%, transparent) !important;
}
This for the GREY part:
.assignment-item:before{
position:absolute;
z-index:-1;
bottom:0;
left:2%;
width:100%;
height:25%;
content:"";
background-color:#f2f2f2;
}
Here is the result:
I have a div with a background-image. I want to overlay the background-image with an rgba color (rgba(0,0,0,0.1)) when the user hovers the div.
I was wondering if there's a one-div solution (i.e. not with multiple divs, one for the image and one for the color, etc.).
I tried multiple things:
<div class="the-div" id="test-1"></div>
<div class="the-div" id="test-2"></div>
<div class="the-div" id="test-3"></div>
And this CSS:
.the-div {
background-image: url('the-image');
margin: 10px;
width: 200px;
height: 80px;
}
#test-1:hover {
background-color: rgba(0,0,0,0.1);
}
#test-2:hover {
background: url('the-image'), rgba(0,0,0,0.1);
}
#test-3:hover {
background: rgba(0,0,0,0.1);
}
See this fiddle.
The only option I saw is to make another image, with overlay, preload it using JavaScript and then use .the-div:hover { background: url('the-new-image'); }. However, I'd like a CSS-only solution (neater; less HTTP requests; less harddisk). Is there any?
The solution by PeterVR has the disadvantage that the additional color displays on top of the entire HTML block - meaning that it also shows up on top of div content, not just on top of the background image. This is fine if your div is empty, but if it is not using a linear gradient might be a better solution:
<div class="the-div">Red text</div>
<style type="text/css">
.the-div
{
background-image: url("the-image.png");
color: #f00;
margin: 10px;
width: 200px;
height: 80px;
}
.the-div:hover
{
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url("the-image.png");
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
}
</style>
See fiddle. Too bad that gradient specifications are currently a mess. See compatibility table, the code above should work in any browser with a noteworthy market share - with the exception of MSIE 9.0 and older.
Edit (March 2017): The state of the web got far less messy by now. So the linear-gradient (supported by Firefox and Internet Explorer) and -webkit-linear-gradient (supported by Chrome, Opera and Safari) lines are sufficient, additional prefixed versions are no longer necessary.
Yes, there is a way to do this. You could use a pseudo-element after to position a block on top of your background image. Something like this:
http://jsfiddle.net/Pevara/N2U6B/
The css for the :after looks like this:
#the-div:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
}
edit:
When you want to apply this to a non-empty element, and just get the overlay on the background, you can do so by applying a positive z-index to the element, and a negative one to the :after. Something like this:
#the-div {
...
z-index: 1;
}
#the-div:hover:after {
...
z-index: -1;
}
And the updated fiddle: http://jsfiddle.net/N2U6B/255/
/* Working method */
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg);
height: 1280px;
width: 960px;
background-size: cover;
}
.tinted-image p {
color: #fff;
padding: 100px;
}
<div class="tinted-image">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam distinctio, temporibus tempora a eveniet quas qui veritatis sunt perferendis harum!</p>
</div>
source: https://css-tricks.com/tinted-images-multiple-backgrounds/
Ideally the background property would allow us to layer various backgrounds similar to the background image layering detailed at http://www.css3.info/preview/multiple-backgrounds/. Unfortunately, at least in Chrome (40.0.2214.115), adding an rgba background alongside a url() image background seems to break the property.
The solution I've found is to render the rgba layer as a 1px*1px Base64 encoded image and inline it.
.the-div:hover {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgkAQAABwAGkn5GOoAAAAASUVORK5CYII=), url("the-image.png");
}
for base64 encoded 1*1 pixel images I used http://px64.net/
Here is your jsfiddle with these changes made. http://jsfiddle.net/325Ft/49/ (I also swapped the image to one that still exists on the internet)
I've gotten the following to work:
html {
background:
linear-gradient(rgba(0,184,255,0.45),rgba(0,184,255,0.45)),
url('bgimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The above will produce a nice opaque blue overlay.
I'm trying to create a bootstrap navbar that has the top half in a certain color with 0.9 opacity and a background-image behind it, and the bottom half with complete transparency (opacity 0) just showing the body's color/background-image.
I've been playing for hours now with linear gradients trying to achieve the effect, but the closest I've got is...
html, body {
height: 100%;
background-image: url("/someBackgroundTexture.png");
}
.theNavBar {
background-image:
linear-gradient(
to bottom,
rgba(127, 180, 220, 0.9) 0%, /*opacity 0.9*/
rgba(127, 180, 220, 0.9) 50%, /*opacity 0.9*/
rgba(0, 0, 0, 0) 50%, /*transparent*/
rgba(0, 0, 0, 0) 100% /*transparent*/
)
,url("/someNavbarTexture.png");
height: 100%;
width: 100%;
}
It works well in terms of dividing the navbar into 2 pieces with different colors, but the problem is that "someNavbarTexture.png" is applied in the wrong half (the bottom half of the navbar), and is effectively just doing the same job that the background-image of html,body is.
What I want to do is somehow assign the ",url("/someNavbarTexture.png");" to the first 2 rows of the linear-gradient (which seems impossible).
Is there any easier way to achieve this effect with CSS? (I really don't care if I end up using linear-gradients or not!) Thanks for any thoughts at all.
--------EDIT---------
Here's a link explaining what I'm talking about...
http://codepen.io/d3wannabe/pen/gPPmOv
The only way I can see of doing this is with a pseudo-element (or div if you wish) that is absolutely positioned and is 50% of the container height.
/* Pen-specific styles */
html,
body {
height: 100%;
margin: 0;
}
/* Pattern styles */
.container {
background-image: linear-gradient(to bottom, rgba(127, 180, 220, 0.9) 0%, rgba(127, 180, 220, 0.9) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
height: 100%;
width: 100%;
position: relative;
}
.container:before {
content: '';
position: absolute;
width: 100%;
height: 50%;
background-image: url("http://www.transparenttextures.com/patterns/3px-tile.png");
z-index: -1;
}
<section class="container">
</div>
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