473,412 Members | 2,599 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,412 software developers and data experts.

The Gradiennt effect

gautamz07
Expand|Select|Wrap|Line Numbers
  1. background: #b3dced; /* Old browsers */
  2. background: -moz-linear-gradient(top,  #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
  3. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
  4. background: -webkit-linear-gradient(top,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
  5. background: -o-linear-gradient(top,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
  6. background: -ms-linear-gradient(top,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
  7. background: linear-gradient(to bottom,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
  8. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=0 ); /* IE6-9 */
  9. background: #d2dc9d url(images/blackgoose.png) no-repeat center 100px fixed;
  10.  
When i take off the last line the gradient effect works , but the image is not shown in the background and when i add the last line the image shows up but the gradient effect does not work . Why is it ?

by last line i mean : -

Expand|Select|Wrap|Line Numbers
  1. background: #d2dc9d url(images/blackgoose.png) no-repeat center 100px fixed;
  2.  
The code is auto generated using www.colorzilla.com/gradient-editor/ , if that helps .
Apr 28 '14 #1
1 1395
Rabbit
12,516 Expert Mod 8TB
You can only have one background per element. If you're trying to layer things, you will have to use a div element
Apr 28 '14 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Susanna | last post by:
Hi all, I'm using the following slideshow script that I found on the web to display changing images with a crossfade effect. Eventually I will be adding many more images to the slideshow. The...
8
by: pertheli | last post by:
I am in a situation where only "goto" seems to be the answer for my program logic where I have to retry calling some repeated functions. Can anybody help in the usage of goto and its effect in...
7
by: Gary Duncan | last post by:
Hi all, My first incursion into this group so apologies if the following question is misplaced. That is, I'm trying to find some free javascript which implements the "ken burns effect" on...
14
by: Charles Douglas Wehner | last post by:
If you go to http://www.netscape.com and search for Wehner, you will find my site. It will say http://wehner.org You click to preview, and find that my home page is too big for the preview...
16
by: eholz1 | last post by:
Hello CSS group, I saw a beautiful effect that I would like to use either by CSS or using photoshop to create the image/effect (maybe even imagemagick) the site address is:...
3
by: Beamer | last post by:
Hi I am trying to build a roating slide effect in javascript. Basically, I have a list like below <ul id="slideShowCnt"> <li id="slide0"><img .../></li> <li id="slide0"><img .../></li> <li...
3
by: Gandalf | last post by:
Sharp effect is one of the photoshop effect on letters. some one a javascript script that create the same effect? thanks
7
by: nolo contendere | last post by:
the alert message appears before the Effect.SlideUp even begins. How can I ensure that the SlideUp completes before executing the next statement? I've tried setTimeout, and I can kind of get it to...
2
by: AndrewC | last post by:
I am using the Scriptaculous/Prototype libraries to build a project and I really want to have an effect like the mootools download page (http://www.mootools.net/download) where when you mouse over...
0
by: Chocolade | last post by:
I created a new form and added split container and then on the left side a treeview and on the treeview i added nodes and on the right side of the split container i added a groupbox. Now in the...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.