Having a hard time getting my background image to lay up top my CSS gradient.This is what I have but when I open it on my mobile phone the image is behind the gradient background. THis is being used on mobile devices, latest versions of IOS and Android.
body {
background-size:cover;
background-image: linear-gradient(bottom, rgb(20,36,130) 44%, rgb(255,255,255) 67%, rgb(7,22,137) 26%), url(main_BG.png);
background-image: -o-linear-gradient(bottom, rgb(20,36,130) 44%, rgb(255,255,255) 67%, rgb(7,22,137) 26%), url(main_BG.png);
background-image: -moz-linear-gradient(bottom, rgb(20,36,130) 44%, rgb(255,255,255) 67%, rgb(7,22,137) 26%), url(main_BG.png);
background-image: -webkit-linear-gradient(bottom, rgb(20,36,130) 44%, rgb(255,255,255) 67%, rgb(7,22,137) 26%),url(main_BG.png);
background-image: -ms-linear-gradient(bottom, rgb(20,36,130) 44%, rgb(255,255,255) 67%, rgb(7,22,137) 26%),url(main_BG.png);
background-repeat:no-repeat, no-repeat;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.44, rgb(20,36,130)),
color-stop(0.67, rgb(255,255,255)),
color-stop(0.26, rgb(7,22,137)),url(main_BG.png);
);
}
Just putting the image URL first should do the trick.
background-image:url(main_BG.png), linear-gradient(bottom, rgb(20,36,130) 44%,
rgb(255,255,255) 67%, rgb(7,22,137) 26%);
Related
I have CSS for Mozilla
background-image: -moz-linear-gradient(center top,
hsl(0, 0%, 20%), hsl(0, 0%, 13%));
and I need this CSS to work with WebKit browsers & IE as well.
I use this gradient generator.
Example:
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #BF50D8),
color-stop(1, #70CDFF)
);
background-image: -o-linear-gradient(bottom, #BF50D8 0%, #70CDFF 100%); //Opera
background-image: -moz-linear-gradient(bottom, #BF50D8 0%, #70CDFF 100%); //Firefox
background-image: -webkit-linear-gradient(bottom, #BF50D8 0%, #70CDFF 100%); //Safari & Chrome
background-image: -ms-linear-gradient(bottom, #BF50D8 0%, #70CDFF 100%); //IE
background-image: linear-gradient(to bottom, #BF50D8 0%, #70CDFF 100%);
For Internet Explorer it should be background-image: -ms-linear-gradient
Ms from Microsoft of course.
And for safari:
-webkit-linear-gradient
Here is how to add gradient crossbrowser:
background: -o-linear-gradient();
background: -webkit-gradient(); /* Older webkit syntax */
background: -webkit-linear-gradient();
background: -ms-linear-gradient();
Example on webkit:
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(), to());
I want my website background to have the top 55% be one color and the bottom 45% to be another color. Based on the tutorial here (I am using green, 80% and 20% to make the size difference easier to spot)
background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%);
background-color: green;
But it's a bit hard to follow and I am unable to get the functionality I want. Right now, it repeats the gradient all the way down the screen but I do not know why. Removing the second rgba() entries breaks it entirely and that was the only trail I thought to follow.
If you apply this background to the body, make sure to add this css :
html {height: 100%;}
Otherwise, the body won't take the entire page height.
See this Fiddle
My question is this: How can i make my 2 background images appear to the right and left above a CSS gradient. I'm working on a Joomla website using the JA Elastica template (modifying the default CSS).
In my current CSS if i put the "background: url('images')" above the gradient, then it shows the images but not the gradient and if i put it below the gradient it shows the gradient but not the images.
The code i'm currently using is this:
body#bd {
background-image: linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -o-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -moz-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -webkit-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -ms-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(142,210,46)),
color-stop(0.51, rgb(171,252,74)),
color-stop(0.76, rgb(206,255,104)));
background:
url('https://dl.dropbox.com/u/6512758/onebeat.ro/right.png') no-repeat top right,
url('https://dl.dropbox.com/u/6512758/onebeat.ro/left.png') no-repeat top left;
}
Everything needs to be on the same background-image property otherwise the previous background statement will be replaced by the next one. For example:
background-image: url('https://dl.dropbox.com/u/6512758/onebeat.ro/right.png') no-repeat top right, linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
Check here for more examples:
How do I combine a background-image and CSS3 gradient on the same element?
Here's what I'm trying to do: A solid grey background with a semi-eclipse (i.e. half an eclipse) of light starting from the centre of the page and ending at the top, so it looks as if there is a torch shining upwards from the centre of the page.
I've tried using SVG instead of css as I thought it might be easier, but I've ran into a few problems. Can anyone point me in the right direction?
Edit: Here's an image of what I'm trying to achieve:
You can use a radial-gradient as the background image like this:
html {
background: #ccc;
background: -moz-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -webkit-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -ms-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -o-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
min-height: 100%;
}
This works by placing the center of the gradient 50% above the page (note the -50% second parameter.) combined with the cover size attribute.
You can read more about the CSS radial-gradient property at MDN.
Here is an example: http://jsfiddle.net/kUFNV/4/
Why not use a CSS gradient? Here:
background: #f9f9f9;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2RjZGNkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #cdcdcd 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f9f9f9), color-stop(100%,#cdcdcd));
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -o-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -ms-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#cdcdcd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#cdcdcd',GradientType=1 );
Then add a margin-top: -50%; CSS to the element with the background. I don't suggest this is the body element as it'll get a bit messy, but create a new element with absolute positioning, give it the gradient code and the -50% margin and z-index: -1; so it'll be under all the rest of the page.
Good luck!
I'd recommend playing around with one of the CSS3 gradient generators like this one. With a few different color stops on a radial gradient, you should be able to accomplish something pretty close.
Here's one I put together quickly: http://jsfiddle.net/43k6F/
Is there any way to create a gradient background using nothing but CSS?
You can see an example of what I want to achieve on this website.
Use this in your CSS:
background-image: -o-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -moz-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.24, rgb(254,133,107)), color-stop(0.62, rgb(35,171,17)));
background-image: -webkit-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -ms-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
/* This last line is all you need for modern browsers */
background-image: linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
See also:
The specification
The MDN documentation
Simple and easy to make. Try this link
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FCFEFF), color-stop(1, #AF00EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FCFEFF 0%, #AF00EF 100%);
Use background-image with linear-gradient() or radial-gradient().
.linear-gradient {
background-image: linear-gradient(to bottom, #000077, #65A5FF);
}
.radial-gradient {
background-image: radial-gradient(#000077, #65A5FF);
}
div {
width: 100%;
height: 200px;
}
<h1>Linear gradient</h1>
<div class="linear-gradient"></div>
<h1>Radial gradient</h1>
<div class="radial-gradient"></div>
According to caniuse.com, CSS gradients are supported by all major browsers. If you have to support IE <= 9, use plain-color or image background fallback. If you have to support Android Browser <= 4.3, also use prefixed version (-webkit-linear-gradient).
.bckgrnd {
background-color:Green;
background-image: -webkit-gradient(linear, 0% 0%,0% 0%, from(Green), to(Yellow));
background-image: -webkit-linear-gradient(top, Green, Yellow);
background-image: -moz-linear-gradient(top, Green, Yellow);
background-image: -ms-linear-gradient(top, Green, Yellow);
background-image: -o-linear-gradient(top, Green, Yellow);
}
Try this website.
http://www.colorzilla.com/gradient-editor/
But there are also images and other things on this website, so if you want to copy the style, look how they have done it and try to implement it on your own ! There is also a website which has pretty neet background pattern's which, combined with gradients look absolutely rich and beautiful:
http://subtlepatterns.com/
A simple sample code for gradients which will be displayed in every browser:
background: rgb(243,226,199);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZTJjNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2MxOWU2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2I2OGQ0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOWQ0YjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(193,158,103,1) 50%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(243,226,199,1)), color-stop(50%,rgba(193,158,103,1)), color-stop(51%,rgba(182,141,76,1)), color-stop(100%,rgba(233,212,179,1)));
background: -webkit-linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: -o-linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: -ms-linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1 );
background-image: linear-gradient(to bottom, #FFFFFF, #FAFAFA);
or
background: linear-gradient(#FFFFFF, #FAFAFA);
Add two div tag and give background color link this
<div style="background-color:black"> </div>
<div style="background: -moz-linear-gradient(top, #55aaee, #003366);"> </div>
This is not exact syntax this is an idea that how u can do