How to design
1) a vertical gradient background with unfixed height,
2) a vertical gradient background with fixed height (say 600px, from blue to white to green), then the rest has the same green color?
update
Now the new design is from the top to the bottom, 120px fixed height from blue to white, then unfixed height for white, and then 120px fixed height from white to green. How to code that?
There is a way to do it, you will want to take advantage of the available background properties:
body {
background-color: green;
background-image: linear-gradient(blue, white, green);
background-repeat: no-repeat;
background-size: 100% 600px;
}
Live example: http://jsfiddle.net/sl1dr/PxNhY/
If you want an unfixed height then replace 600px with 100%.
EDIT: Here is the new solution according to your changes: http://jsfiddle.net/sl1dr/EtYLZ/
You can try crossbrowser (ie5.5+) linerar gradient generator
This Link:
Css Gradient From Green To White To Blue
Or you can use this link directly: Gradient Generator for generating cross-browser Css 3.0 Backgrounds.
You can generate Professional gradients and get the code for pasting in your own css file.
You must know that the css may not support some versions of IE
Related
This is my design layout. Structure like this
<div class="outer">
<div class="container">
<div class="content"></div>
<aside></aside>
</div>
</div>
The css for that layout is
.container{width:1000px; margin:0 auto;}
.content{width:70%; float:left;}
aside{width:30%; float:left;}
Okay, now I need to set up a gradient background for the sidebar. I can use a gradient image repeat-y to make that for the sidebar. But the margin-right space of the container also have the same gradient.
I have used the background gradient for .outer div. It is okay for normal desktop. But when it is visited from a higher resulation it shows something like that.
I know the gradient displacement is happening because of the % used to generate the gradient. I am giving you the default gradient line I have used without prefix.
background: linear-gradient(to right, #ffffff 0%,#ffffff 67%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
What is the probable solution for that???
** This is a long page with short sidebar. But the background should be from top to bottom.
If you need live link, I have that. https://blog.measuredsearch.com/
Try this background for container_wrap class
#main .container_wrap
{
background:-webkit-linear-gradient(left, #ffffff 0%,#ffffff 50%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
}
Rather than applying the background to the entire container and setting percentages at which the gradient should start so that it fits over the aside I recommend applying this only to the aside and adjusting the styling accordingly.
As well as issues with resolution, you also have duplicate percentage values being stored.
aside{
width:30%;
float:left;
//background gradient definition here
}
http://jsfiddle.net/ky9enkb4/
Browser show you correct result. As a fast variant media queries for wide-screens
#media screen and (min-width: 1500px) #main .container_wrap {
background: linear-gradient(to right, #ffffff 0%,#ffffff 62%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
}
Or just give width for white gradient width 62%. It will be normal.
I believe this is what you are trying to achieve
The whole page with background gradient from top to bottom. Starting with #fff to accommodate content section
The dark region to accommodate sidebar.
To maintain the stability with large and small screens.
What I have done
I have added the gradient to the body so that the left is white and right is dark color.
Different gradient whit only dark colors and ending with the same color that the body is ending with (You might have to check with really large screen if the shade difference occurs outside the container).
The container, aside to occupy height from top to bottom of the screen
Check out the Fiddle
body{background: linear-gradient(to right, #ffffff 0%,#ffffff 67%,#e5e3e6 66%,#cfd7da 72%,#cfd7da 100%);margin:0;}
.container{width:400px; margin:0 auto;background:#fff;height:100vh;border:1px solid #999;}
.content{width:70%; float:left;height:100vh;}
aside{width:30%; float:left;background: linear-gradient(to right, #acb9bf ,#cfd7da 72%,#cfd7da 100%);height:100vh;}
hi you may try this may this work for you
background: linear-gradient(to right, #ffffff 0%,#ffffff 0%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
I've searched and searched, but I can't, for the life of me, figure out what is wrong with my background attachment. I can't get it to break free from the div. For brevity, here is a fiddle for you to observe and test. I'm working with Skrollr.js which might be a factor FYI.
The second panel that moves up over the first is the one I'm referring to. And by "break free" I mean that the #panel-2 background is traveling with the #panel-2 div to cover the first panel instead of the #panel-2 background being fixed at the top of the viewport and being "revealed" by the #panel-2 div moving into the viewport.
<div id="panel-2" class="panel" data-0="transform:translate3d(0%,100%,0)" data-200p="transform:translate3d(0%,0%,0)"></div>
#panel-2 {
background: url('http://dev.synergexis.com/skp/example-img/panel-2-bg.jpg') no-repeat center center;
background-size: cover;
background-attachment:fixed;
transform:translateZ(0%, 100%, 0);
-ms-transform:translateZ(0%, 100%, 0);
/* IE */
-moz-transform:translateZ(0%, 100%, 0);
/* Firefox */
-webkit-transform:translate3d(0%, 100%, 0);
/* Safari Chrome */
-o-transform:translateZ(0%, 100%, 0);
/* Opera */
z-index:-2;
}
Here is an example of the behavior. Given by the amazing, I Hate Tomatoes', Petr Tichy... the second section right below the header with the red and blue stars and dots is the effect I would like to mimic.
Try to avoid using css 3dtranslations, the working skrollr demo you are trying to mimic doesn't use them. I have read some complaints about css 3dtranslations ignoring fixing content to viewport before. Once you remove them, the background-attachment should start working.
I have a navigation bar and want it to have a border at the bottom like a multi-colored stripe. For example, Google uses a multi-colored stripe like this:
Could I do this in pure CSS, or would I have to use something like border-image?
You can do this with a linear gradient. In addition to just plain colors, you can do gradients for each stop. For google's own stripe, the color stops would look like this, CSS color names used for clarity:
background-image: linear-gradient(
to right,
blue,
blue 25%,
red 25%,
red 50%,
orange 50%,
orange 75%,
green 75%);
You can play with background-position and background-size to make it smaller than just the full header size, or put it into an :after / :before element and change the size on that element.
Example of color stops with gradient:
http://codepen.io/tholex/pen/nCzLt
I think you're much better doing this with a background image. You can keep the image really tiny by making each colour 1px wide and your image file 1px tall (they'll scale perfectly, with crisp edges).
An example:
.navigation-bar:after {
content: " ";
height: 6px;
width: 100%;
background: url(../img/stripe.png) repeat;
background-size: 100% 1px;
}
I'd like to have a css background-image be a top-to-bottom gradient, and then a color. For example, if I wanted gradient that's #FF0000 at the top, #00FF00 400 pixels from the top, and immediately cuts to #EFEFEF after that, how would it be done? Is there some form of background-image-repeat I could use?
The actual property is called background-repeat. You need to use it in conjunction with background-size to restrict the gradient to 400 pixels tall and prevent it from tiling:
html {
background-color: #efefef;
background-image: linear-gradient(#ff0000, #00ff00);
background-repeat: no-repeat;
background-size: 100% 400px;
}
jsFiddle preview
Of course, this assumes you're using a CSS3 gradient, in which case browser support isn't an issue as all browsers that implement CSS3 gradients also implement background-size. But if you're using an image file for your gradient and you need to support older browsers, you're going to have to create an extra element or a pseudo-element with the appropriate height and position, to contain just the gradient.
Yes, use background-color and a gradient, set the proper background-repeat & background-size.
DEMO
background: #EFEFEF linear-gradient(#FF0000, #00FF00) repeat-x;
background-size: 1px 400px;
Adding a 3rd stop to your gradient is also an option (in case there are browsers that support gradients but not background-size). Place the 2nd and 3rd stops right at 400px, with the color for the 3rd gradient as your desired bg color.
I've tried to do this various different ways, but have had no success so far.
Essentially what I want is a gradient going down the page (which I am using a background image for), then once the image ends, I want a background colour to take over (so that the page doesn't just turn white).
I've tried messing around with using different div tags and the like to layer things etc, but have had no luck so far. Either the background colour overrides the image, or the colour doesn't extend to the bottom of the page.
You could just use a background for your body:
body {
/* Your gradient image */
background-image: url(my_gradient.png);
/* Color below the background image */
background-color: #C0FFEE;
/* Only repeat from left to right */
background-repeat: repeat-x;
}
Or use the background shorthand
body {
background:#C0FFEE url('my_gradient.png') repeat-x left top;
}
You probably want to do something like this:
body
{
background: #FFCC00 url('your-background.png') repeat-x;
}
Try something like this:
http://jsfiddle.net/pUKeT/
body{
background: blue url(http://www.laserasecroydon.com/assets/images/blue-gradient.jpg) no-repeat fixed left top;
}
It's not pretty, but this way you can see where the color should take over
body{
background:url("image.jpg") #COLOR no-repeat;
}
Thanks guys, I've worked it out. The CSS I was using was fine, it was the image that was the problem. Instead of setting the background to white, it was transparent. Hence the colour came through and overrode the gradient. I've now set the background to white, and it works fine.