CodingForums.com - View Single Post

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.