first time asking, please go easy on me
I'm trying to make a background gradient for a web app that uses JQuery Mobile. I'm clueless about CSS and UI design in general.
I want the gradient to fill the entire page's space. Right now, it fills up to the original window's size, but "cuts off" when scrolling down.
Most suggestions point to this:
html
{
height: 100%;
}
...which doesn't work for me. Here is what I have:
content: " ";
width: 100%;
height: 100%;
float: left;
position: relative;
z-index: -1;
top: 0;
left: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 40%, rgba(0,0,0,0.5) 100%) fixed;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0.5))) fixed;
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%)fixed;
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed; background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;
background: linear-gradient(135deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
This problem happens sometimes when you use height:100%;. Since it means to fill 100% of the browser window, it doesn't fill the rest because that would be past 100%.
Try tweaking it a little and writing it like this:
html
{
min-height: 100%;
}
Now it can fill past 100% so it should fill the rest of the background.
Related
When i create background gradient like this:
background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 59%,#ededed 100%);
I get ellipse that is inside the div, and conform to shape of div. So if div is large in height then ellipse would be stretched vertically. If div is a square then ellipse would be like a circle. That's fine, i want to control height of ellipse.
The exact question can be addressed by combining the last 2 answers: circle gradient and adjusting the background size.
Something like this:
div {
width: 300px;
height: 100px;
background: radial-gradient(circle, white 0%, red 50%, black 100%);
background-size: 100% 200%;
background-position: 0% 50%;
}
<div></div>
I find it less of a hassle than nested divs, and by playing with the background-position and size values, you can get some pretty cool effects!
Use a div with overflow set to hidden, and a div inside of it absolutely positioned with a fixed height.
#outer {
height: 100px;
overflow: hidden;
position: relative;
width: 200px;
}
#inner {
background: radial-gradient(ellipse at center, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
bottom: 0;
height: 150px;
position: absolute;
width: 200px;
}
<div id="outer">
<div id="inner"></div>
</div>
You can play with the background dimensions and position:
div {
width: 300px;
height: 100px;
background: radial-gradient(ellipse at center, white 0%, red 100%);
background-size: 100% 200%;
background-position: 0% 50%;
}
demo
You can try circle instead of ellipse:
Demo on dabblet
.rect2 {
width: 600px;
height: 100px;
line-height: 100px;
text-align: center;
background: radial-gradient(circle, #ffffff 0%, #ffffff 59%, #dcdcdc 100%);
}
Ok so I am trying to set up my background image set up
So its like
<---Repeating image on the left --- Center image --- Repeating image on the right --->
The image on the left is not the same as the image on thie right.
I have tried using this
body{
background:
url(../Img/Background-01.png) center top no-repeat,
url(../Img/Background-02.png) right 0 repeat-x,
url(../Img/Background-03.png) left 0 repeat-x;
background-color:#232323;
}
But Background-02.png is overlapping Background-03.png resulting in Background-02.png repeating on both the left as well as the right side of the page when its only meant to be repeating on the right.
Here is a screen shot of my design it might give you a beter idear of what i am trying to make
the white boxes are parts of the background layer that are cropt out in there own image to be use on the website [img]http://s7.postimg.org/iy0tm6k2j/Screen_Shot_2014_06_27_at_5_16_13_pm.png[/img]
any help will be apreeseated to help fix this. Ok i worked it out this is what i used
'#Container{
position:relative;
width:1000px;
margin: 0 auto;
left: 0;
right: 0;
border:thin solid #000;
z-index:4;
}
#BGCont
{
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
width: 100%;
z-index:0;
height:500px;
}
#BGLeft
{
position:absolute;
width: 50%;
left: 0;
z-index:1;
background:url(../Img/Background-03.png) left 0 repeat-x;
height:500px;
}
#BGRight
{
position:absolute;
width: 50%;
z-index:2;
right: 0;
background:url(../Img/Background-02.png) right 0 repeat-x;
height:500px;
}
#BGCenter
{
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
width: 1200px;
z-index:3;
background:url(../Img/Background-01.png) center top no-repeat;
height:500px;
}'
Now my question is is this an ceptable way to do it or is it too messy?
Try to use before and after pseudo classes like below.
body
{
background: url(../Img/Background-01.png) center top no-repeat;
background-color:#232323;
}
body::before
{
background:url(../Img/Background-03.png) left 0 repeat-x;
}
body::after
{
background:url(../Img/Background-02.png) right 0 repeat-x;
}
By using repeat-x all you're doing is repeating it horizontally, on both left and right side. That's why the second image is overlapping the third one on the right. I suggest editing the image separately and then using it. As by this method you don't specify which side you want to repeat it on, but only the axis, i.e., x or y or horizontal or vertical
or you if you only want to extend it on either sides then you can use this:-
#leftHalf {
background: url(../Img/Background-03.png);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(../Img/Background-02.png);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}
Also i had done something similar. I put a gray stop-marker on the left side, a white one on the right, and one of each right where you want the gray to end. In my example i put it at 40%.
background: #7a7a7a; /* Old browsers */
background: -moz-linear-gradient(top, #7a7a7a 0%, #a5a5a5 40%, #ffffff 40%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a7a7a), color-stop(40%,#a5a5a5), color-stop(40%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* IE10+ */
background: linear-gradient(top, #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
As i understand, you want 3 images to show,
<---Repeating image on the left --- Center image --- Repeating image on the right --->
There are tow ways to set that,
1- Create divs and assign images to these divs
<--- left Div --- Center Div--- right Div --->
2- Create Tables and make 23 column
<--- C1--- C2--- C3 --->
Example: http://cdpn.io/EaDdx
Next to the "Sample Title" you can see the arrowhead I'm trying to create. I'm trying to get this to work in the same manner as the rectangles and the circle, allowing it to act as a 'porthole' to it's own fixed background image.
I've tried everything from using borders to create a triangle (which blocked out the body's background image), to using various rotations, alternations of use between an actual background image and background gradient.
Right now I'm using basically using this method, as so:
.gradient-triangle {
width: 50px;
height: 50px;
position: absolute;
top: 0px;
left: -25px;
clip: rect(auto 25px 50px auto);
}
.gradient-triangle:after {
content: '';
position: absolute;
top: 4px;
bottom: 4px;
left: 9px;
right: 0px;
-webkit-transform:rotate(-45deg);
background-attachment: fixed;
background: -moz-linear-gradient(45deg, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#000000), color-stop(49%,#000000), color-stop(50%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(45deg, #000000 0%,#000000 49%,#ffffff 50%,#ffffff 100%);
background: -o-linear-gradient(45deg, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%);
background: -ms-linear-gradient(45deg, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%);
background: linear-gradient(45deg, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );
background-position: center center;
background-attachment: fixed;
border: 1px solid #fff;
}
This is mainly a chrome issue right now, though as you'll see, it does something different in each browser, which is pretty odd.
I haven't seen any other websites that do this sort of thing, using fixed background images, within elements, to offer the "porthole" style view. I'd be interested to see any that anyone may know of, to checkout how they handle things similar to this.
Edit: Just to clarify what I think is causing this. Usually a fixed background image is relative to the window, not the element it's assigned to. As soon as that element is rotated, the background image becomes relative to it. There's a good chance this is a browser bug, I'd just like to be sure.
I could get the following to work in Chrome:
CSS
.filler {
height: 2000px;
}
.test2 {
position: absolute;
width: 400px;
height: 370px;
left: 219px;
top: 10px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position-x: -266px;
background-position-y: -107px;
}
.container {
-webkit-transform: rotate(45deg);
position: absolute;
margin-left: -275px;
margin-top: -116px;
clip: rect(-265px, 693px, 0px, 428px);
}
.container2 {
-webkit-transform: rotate(-45deg);
position: absolute;
}
.test {
position: absolute;
width: 186px;
height: 400px;
left: 300px;
top: 85px;
background-attachment: fixed;
background-repeat: no-repeat;
}
.test, .test2 {
background-image: url(http://placekitten.com/900/600);
}
fiddle
There is alot of hand-set positions; probably that could be set easier playing with transform-origins.
Also, I have a difference between positions in Chrome (on one side) and Firefox - IE (on the other). Still trying to understand why ..
I have the following CSS code.
body{
height: 100%;
min-height: 100%;
max-height: 100%;
background-color: #1468b3;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1468b3));
background-image: -webkit-linear-gradient(top, #2F2727, #1468b3);
background-image: -moz-linear-gradient(top, #2F2727, #1468b3);
background-image: -ms-linear-gradient(top, #2F2727, #1468b3);
background-image: -o-linear-gradient(top, #2F2727, #1468b3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2F2727", endColorstr="#1468b3");
}
Regardless of the content of the page there should be a nice gradient that stretches from the top to the bottom of the browser window. This screenshot illustrates the issue:
I'm not quite sure why this is happening.
Adding
no-repeat;
Cancels out the gradient and instead the background is the solid #1468b3
Try adding html { height: 100%; }
ok say the content inside the <body> totals 300px high.
If I set the background of my <body> using -webkit-gradient or -moz-linear-gradient
Then I maximize my window (or just make it taller than 300px) the gradient will be exactly 300px tall (the height of the content) and just repeat to fill the rest of the window.
I am assuming this is not a bug since it is the same in both webkit and gecko.
But is there a way to make the gradient stretch to fill the window instead of repeat?
Apply the following CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
Edit: Added margin: 0; to body declaration per comments (Martin).
Edit: Added background-attachment: fixed; to body declaration per comments (Johe Green).
Regarding a previous answer, setting html and body to height: 100% doesn't seem to work if the content needs to scroll. Adding fixed to the background seems to fix that - no need for height: 100%;
E.g.:
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}
I know I'm late to the party, but here's a more solid answer.
All you need to do is use min-height: 100%; rather than height: 100%; and your gradient background will extend the entire height of the content without repeating, even if the content is scrollable.
Like this:
html {
min-height: 100%;
}
body {
background: linear-gradient(#b5e48c, #457b9d);
}
There's a second solution though.
As others have said, adding the value fixed to the background declaration, will make the gradient extend the full height of the viewport.
Like this:
body {
background: linear-gradient(#b5e48c, #457b9d) fixed;
}
Granted, you still need to declare min-height: 100%; in the html.
Here's a demo in CodePen where you can play with both solutions: https://codepen.io/ricardozea/pen/abwGBmz?editors=1100
Here's what I did to solve this problem... it will show the gradient for the full length of the content, then simply fallback to the background color (normally the last color in the gradient).
html {
background: #cbccc8;
}
body {
background-repeat: no-repeat;
background: #cbccc8;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
background: -moz-linear-gradient(top, #fff, #cbccc8);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
}
<body>
<h1>Hello world!</h1>
</body>
I've tested this in FireFox 3.6, Safari 4, and Chrome, I keep the background-color in the body for any browsers that for some reason don't support styling the HTML tag.
Setting html { height: 100%} can wreak havoc with IE. Here's an example (png). But you know what works great? Just set your background on the <html> tag.
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}
Background extends to the bottom and no weird scrolling behavior occurs. You can skip all of the other fixes. And this is broadly supported. I haven't found a browser that doesn't let you apply a background to the html tag. It's perfectly valid CSS and has been for a while. :)
There is a lot of partial information on this page, but not a complete one. Here is what I do:
Create a gradient here: http://www.colorzilla.com/gradient-editor/
Set gradient on HTML instead of BODY.
Fix the background on HTML with "background-attachment: fixed;"
Turn off the top and bottom margins on BODY
(optional) I usually create a <DIV id='container'> that I put all of my content in
Here is an example:
html {
background: #a9e4f7; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
background: linear-gradient(135deg, #a9e4f7 0%,#0fb4e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed;
}
body {
margin-top: 0px;
margin-bottom: 0px;
}
/* OPTIONAL: div to store content. Many of these attributes should be changed to suit your needs */
#container
{
width: 800px;
margin: auto;
background-color: white;
border: 1px solid gray;
border-top: none;
border-bottom: none;
box-shadow: 3px 0px 20px #333;
padding: 10px;
}
This has been tested with IE, Chrome, and Firefox on pages of various sizes and scrolling needs.
Adding a space and the word fixed to the end should be sufficient. No need to set heights.
body{
background: linear-gradient(#e4efe9,#93a5cf) fixed;
}
Dirty; maybe could you just add a min-height: 100%; to the html, and body tags? That or at least set a default background color that is the end gradient color as well.
I had trouble getting the answers in here to work.
I found it worked better to fix a full-size div in the body, give it a negative z-index, and attach the gradient to it.
<style>
.fixed-background {
position:fixed;
margin-left: auto;
margin-right: auto;
top: 0;
width: 100%;
height: 100%;
z-index: -1000;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.blue-gradient-bg {
background: #134659; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
}
body{
margin: 0;
}
</style>
<body >
<div class="fixed-background blue-gradient-bg"></div>
</body>
Here's a full sample
https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55
I have used this CSS code and it worked for me:
html {
height: 100%;
}
body {
background: #f6cb4a; /* Old browsers */
background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
background-position: 0px 0px;
}
A related information is that you can create your own great gradients at http://www.colorzilla.com/gradient-editor/
/Sten
background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3), to(#13486d)); background: -moz-linear-gradient(top, #9dc3c3, #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;
this is what I did:
html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);
/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}
before I floated the body, there was a gap on top, and it was showing the background color of html. if I remove the bgcolor of html, when I scroll down, the gradient is cut. so I floated the body and set it's position to relative and the width to 100%. it worked on safari, chrome, firefox, opera, internet expl.. oh wait. :P
what do you guys think?
instead of 100% i just add some pixxel got this now and it works for whole page without gap:
html {
height: 1420px; }
body {
height: 1400px;
margin: 0;
background-repeat: no-repeat; }