Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2004
    Location
    Montreal, Canada
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Canvas gradient + Repeat image?

    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

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    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.

  • #3
    New Coder
    Join Date
    May 2004
    Location
    Montreal, Canada
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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: progidXImageTransform.Microsoft.gradient(
    gradientType=1, startColor=0, endColorStr=#FFFFFF
    );
    /* IE8 uses -ms-filter for whatever reason... */
    -ms-filter: progidXImageTransform.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

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    Quote Originally Posted by javierdl View Post
    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: progidXImageTransform.Microsoft.gradient(
    gradientType=1, startColor=0, endColorStr=#FFFFFF
    );
    /* IE8 uses -ms-filter for whatever reason... */
    -ms-filter: progidXImageTransform.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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •