I have a website im working on and right now it has a gradient bg with ccs code and have a cloud image on top with transparent background. I'm trying to make the clouds scroll left infinatly to make it stand out a bit more. Is there any way to do that with just adding in some CSS codes? heres my code
#body { background: #9bd5eb;
background-image: url(../images/bloobg.png); /* fallback */
background-image:url(../images/bloobg.png), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(../images/bloobg.png), -webkit-linear-gradient(bottom, #9bd5eb, #01aef0); /* Chrome 10+, Saf5.1+ */
background-image: url(../images/bloobg.png), -moz-linear-gradient(bottom, #9bd5eb, #01aef0); /* FF3.6+ */
background-image: url(../images/bloobg.png), -ms-linear-gradient(bottom, #9bd5eb, #01aef0); /* IE10 */
background-image: url(../images/bloobg.png), -o-linear-gradient(bottom, #9bd5eb, #01aef0); /* Opera 11.10+ */
background-image: url(../images/bloobg.png), linear-gradient(bottom, #9bd5eb, #01aef0); /* W3C */
background-attachment:fixed;
}
`
link to the website is www.bloomooyogurt.com Thanks!
No, you need to use JavaScript. There comes a point in "infinite scroll" animation where you need to detect and reset the positions of the elements. CSS cannot do that.
Related
Unable to use gradient along with image.
This works:
background: red url("/Style Library/Images/Recurr.png") center no-repeat
This wont work:
background: linear-gradient(black, white) url("/Style Library/Images/Recurr.png") center no-repeat
How to use gradient along with image.
You can use it.
See this:
background: #6cab26;
background-image: url(/Style Library/Images/Recurr.png); /* fallback */
background-image: url(/Style Library/Images/Recurr.png), -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */
The key is to use background-image for image and background for gradient.
I have included redundancies for other browsers.
.Blue{
background:#47b; /* Old browsers */
background:-webkit-linear-gradient(top,#47b 0%,#249 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#47b 0%,#249 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top,#47b 0%,#249 100%); /* IE10+ */
background:linear-gradient(to bottom,#47b 0%,#249 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477bb',endColorstr='#224499',GradientType=0); /* IE6-9 */
background-image: url("/Style Library/Images/Recurr.png") center no-repeat;
}
Here's a link to my page: http://mobile.sheridanc.on.ca/~vecanski/
The problem that I am having is that height is set to 100% and yet i can still scroll down and see the light blue, even though there is nothing on the page except floating bubbles. Does anyone knows as to why I am able to scroll down? Also I have a gradient effect, here is the code:
background: #4094d1; /* Old browsers */
background: #4a97ce; /* Old browsers */
background: -moz-linear-gradient(top, #4a97ce 0%, #2687cc 22%, #1080cc 48%, #0c0c02 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a97ce), color-stop(22%,#2687cc), color-stop(48%,#1080cc), color-stop(99%,#0c0c02)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4a97ce 0%,#2687cc 22%,#1080cc 48%,#0c0c02 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4a97ce 0%,#2687cc 22%,#1080cc 48%,#0c0c02 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4a97ce 0%,#2687cc 22%,#1080cc 48%,#0c0c02 99%); /* IE10+ */
background: linear-gradient(to bottom, #4a97ce 0%,#2687cc 22%,#1080cc 48%,#0c0c02 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a97ce', endColorstr='#0c0c02',GradientType=0 ); /* IE6-9 */
What I don't understand is why does the gradient not go all the way, even if it is scrollable, why does it restart at the end of the page?
So 2 questions really:
How do I remove the scroll-able part of the page?
If I were to leave the scroll-able part of the page in, how do I force the gradient to extend to the very end and not restart?
you can figure out the problems like this by using browser inspect element
by the way, to fix this:
Remove #bubbles padding:100px 0
OR
Add overflow:hidden to the #container
I tred making this work using this reference. Yet it doesn't seem to be doing the trick. Did I miss something? I just need another set of eyes on this. Thank you.
The background image shows, but not the gradient. Here is a fiddle to show you what I mean.
What am I doing wrong?
background: #23458E;
background-image: url('/static/images/grey.png'); /* fallback */
background-image: url('/static/images/grey.png'), -webkit-gradient(linear, left top, left bottom, from(#23458E), to(#2661A8)); /* Saf4+, Chrome */
background-image: url('/static/images/grey.png'), -webkit-linear-gradient(top, #23458E, #2661A8); /* Chrome 10+, Saf5.1+ */
background-image: url('/static/images/grey.png'), -moz-linear-gradient(top, #23458E, #2661A8); /* FF3.6+ */
background-image: url('/static/images/grey.png'), -ms-linear-gradient(top, #23458E, #2661A8); /* IE10 */
background-image: url('/static/images/grey.png'), -o-linear-gradient(top, #23458E, #2661A8); /* Opera 11.10+ */
background-image: url('/static/images/grey.png'), linear-gradient(top, #23458E, #2661A8); /* W3C */
The image is completely opaque, so since it's specified before the gradient, it covers the gradient.
Both your image and the gradient are completely opaque, so it's not clear what exactly you're trying to accomplish with both of them. An explanation of your problem is the best I can offer at the moment.
I have built a div element and gave the background color green.Then,I wanted to change the color's opacity until it is white, from top to bottom. The darkest green will be top and lightest color which is white will be the bottom of it. Is there any way to do that with css,without creating an image for it?
Thanks
You can use CSS3 to generate background gradients (via the background-image element) BUT it's not uniformly supported across browsers.
You'd be looking at code like this:
background-color: #108B00; /* Fallback solid color */
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #108B00, #FFFFFF); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #108B00, #FFFFFF); /* FF3.6 */
background-image: -ms-linear-gradient(top, #108B00, #FFFFFF); /* IE10 */
background-image: -o-linear-gradient(top, #108B00, #FFFFFF); /* Opera 11.10+ */
background-image: linear-gradient(top, #108B00, #FFFFFF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#108B00', EndColorStr='#FFFFFF'); /* IE6–IE9 */
Is there a way to create a color gradient in CSS without using an image file?
I am trying to give a DIV a background with a color gradient so that it looks glossy.
Safari (Webkit) supports it:
http://webkit.org/blog/175/introducing-css-gradients/
Firefox 3.6+ supports it:
https://developer.mozilla.org/en/CSS/-moz-linear-gradient
W3 spec defines support for it:
http://dev.w3.org/csswg/css3-images/#gradients-
And you can use Modernizr to detect support and fall back on an image:
http://www.modernizr.com/docs/#cssgradients
Try this if you are using or can use PHP
http://snipplr.com/view/26070/multicolor-gradient-generator/
http://www.designdetector.com/2005/09/css-gradients-demo.php
See javascript solutions here
jQuery gradient plugin?
http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm
Some gradient image generator
http://www.roundedcornr.com/
http://gradient-maker.com/
http://www.grsites.com/generate/group/4000/
http://tools.dynamicdrive.com/gradient/
http://www.allcrunchy.com/Web_Stuff/Gradient_Generator/
71 Gradient Resources for Web Design
http://vandelaydesign.com/blog/tools/gradient-resources/
Sure Is (using color: Royal Blue, Hex Code: #002366 as an example (example taken from: http://www.99colors.net/name/royal-blue):
<div class="gradient">[Your DIV text and what not]</div>
/* CSS Background Gradient */
.gradient
{
background-color: #628AD9;
/* For WebKit (Safari, Chrome, etc) */
background: #628AD9 -webkit-gradient(linear, left top, left bottom, from(#001640), to(#628AD9)) no-repeat;
/* Mozilla,Firefox/Gecko */
background: #628AD9 -moz-linear-gradient(top, #001640, #628AD9) no-repeat;
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#001640, endColorstr=#628AD9) no-repeat;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#001640, endColorstr=#001640)" no-repeat;
}
Webkit browsers support pure-CSS gradients like this (see this example in Safari or Chrome) - but practically speaking for a cross-browser implementation you'll need to use images.
Go to http://www.colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D
You will see it generates the following code for the displayed glossy gradient there. You can change the gradient and copy the new code.
background: rgb(255,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */