Canvas gradient + Repeat image?

javierdl · 10-03-2012, 04:15 AM

Hi guys!

Does anyone know if is possible to use both techniques together:
Filling a canvas with a repeat image, and also apply a gradient on the image?
Not a separate gradient overlapping the repeating-image, but rather affecting the image's opacity value, but in a gradual way, top to bottom for instance.

Thanks in advance,

JDL

aaronhockey_09 · 10-03-2012, 04:51 AM

Im not sure if you can do both background image with gradient on just the canvas
But you could prob just put a div inside of the canvas with a transparent gradient

im assuming that would do it
check out http://stackoverflow.com/questions/2...rency-gradient

hope this helps.

javierdl · 10-03-2012, 05:37 PM

Thank you so much for your input Aaron

I gave it a try to a much simpler proposition, just the one suggested in the page you advised to check. But for some mysterious reason is not working for me

Would you mind checking the code and telling me what am I missing or doing wrong?

<html>
<head>
<title>HTML Online Editor Sample</title>

<style type="text/css">

p {color:red; font-family:"verdana"; }
div { border-style:"solid"; border-width:"10px"; border-color:"black"; }
.gradient
{
/* webkit example */
background-image: -webkit-gradient(
linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
to(rgba(255, 255, 255, 0))
);
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
right center,
rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
);
/* IE 5.5 - 7 */
filter: progid

XImageTransform.Microsoft.gradient(
gradientType=1, startColor=0, endColorStr=#FFFFFF
);
/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid

XImageTransform.Microsoft.gradient(
gradientType=1, startColor=0, endColoStr=#FFFFFF);
}
</style>
</head>

<body>

<div class="gradient">
<p >
This is an online HTML editor. Try editing this text area - go on!</p>
</div>

<h1>Online HTML Editor</h1>

</body>

</html>

Thanks in advance Aaron

aaronhockey_09 · 10-14-2012, 03:48 AM

Quote:

Originally Posted by javierdl

Thank you so much for your input Aaron

I gave it a try to a much simpler proposition, just the one suggested in the page you advised to check. But for some mysterious reason is not working for me

Would you mind checking the code and telling me what am I missing or doing wrong?

<html>
<head>
<title>HTML Online Editor Sample</title>

<style type="text/css">

p {color:red; font-family:"verdana"; }
div { border-style:"solid"; border-width:"10px"; border-color:"black"; }
.gradient
{
/* webkit example */
background-image: -webkit-gradient(
linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
to(rgba(255, 255, 255, 0))
);
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
right center,
rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
);
/* IE 5.5 - 7 */
filter: progid

XImageTransform.Microsoft.gradient(
gradientType=1, startColor=0, endColorStr=#FFFFFF
);
/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid

XImageTransform.Microsoft.gradient(
gradientType=1, startColor=0, endColoStr=#FFFFFF);
}
</style>
</head>

<body>

<div class="gradient">
<p >
This is an online HTML editor. Try editing this text area - go on!</p>
</div>

<h1>Online HTML Editor</h1>

</body>

</html>

Thanks in advance Aaron

Sorry for the super late response - been busy and havnt checked codingforums in a while.
So i would make it look something like this.

Code:

<div class="repeat-image">
      <div class="gradient">
<p >
This is an online HTML editor. Try editing this text area - go on!</p>
</div>

<h1>Online HTML Editor</h1>
      </div>
</div>

Then you would add a background image to the first one like so

Code:

.repeat-image { background: url(images/yourimageurlhere.jpg) repeat; }

Then make sure your gradient div spans the full width and height of your .repeat-image div by adding this

Code:

.gradient { width:100%; float:left; height:100%; }

Let me know if this helps or works

Cheers.