Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Grid (lines) over image

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 172
    Comment on it

    So, this thing took lot of my time. I hope it will save yours.

    Here, we need a parent div and a child div. Parent div will have the image in background, I am using inline style so that one can use it in as many pages as he/she wants.

    Here's the HTML

    <div id="kinetic" class="imageDiv" style="background:url('green_life.png');">
       <div class="gridBackground">
           <!-- Put anything you like over image here -->
       </div>
    </div>
    

    Here's css for imageDiv and gridBackground, I used linear-gradient style for drawing lines.

    .imageDiv{
      width:900px; 
      height:350px;
      border:1px solid #ccc;
    }
    .gridBackground{
      background-color: transparent;
      background-image: linear-gradient(0deg, transparent 24%, 
                                          rgba(255, 255, 255, 0.7) 25%, 
                                          rgba(255, 255, 255, .05) 26%, 
                                          transparent 27%, transparent 74%, 
                                          rgba(255, 255, 255, .05) 75%, 
                                          rgba(255, 255, 255, .05) 76%, 
                                          transparent 74%, transparent), 
                                          linear-gradient(90deg, transparent 24%, 
                                          rgba(255, 255, 255, 0.7) 25%, 
                                          rgba(255, 255, 255, .05) 26%, 
                                          transparent 27%, transparent 74%, 
                                          rgba(255, 255, 255, .05) 75%, 
                                          rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
      height:100%;
      background-size:50px 50px;
    }
    

    This will draw white lines which will give a grid impression in html.

    Play with transparency to change line width and number of grids, play with rgba to change grid lines color

    Note: transparent changes may blur the grid lines so use them wisely.

    Although, I don't want it but I had to put image in background using style, I would have love it, if it can be done using img tag

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: