having an image repeat itself based on browser size

Question

So I want grass to fill from left to right right above my footer. I am having a hard time getting it to repeat itself. I set positition to fixed, and also float: left but still no luck. I would just continuously keep putting more images hardcoded in my HTML, but I feel I can do this with CSS and not have like 100 lines of extra code. Also, I want the images to grow or retract if the user makes browser larger or smaller.

live demo

HTML

<figure>
        <img src="arrow.png" alt="arrow" class="arrow">
        <p class="clickHere"> Click one! </p>

        <img src="downwardmonkey.png" alt="down" class="head">
        <img alt="down" class="footer">
    </figure>

CSS

figure img.footer
{
    position: fixed;
    bottom: 45px;
    float: left;
    background-image: "grass.png";
    background-repeat: repeat-x;
}

if any other code is needed to help let me know!

There is a 404 error too. Edit the path (grass.png is not in the same folder as the stylesheet). — Salman A, Mar 22 '14 at 20:25
really? http://iam.colum.edu/students/jordan.max/algorerhythm/CSS/Grass.png :) — , Mar 22 '14 at 20:28

Ankur Aggarwal · Accepted Answer · 2014-03-22T21:08:33.067

0

Instead of putting images tags put a div and provide background image to it

   <figure>
        <div class="grassImageDiv"></div>
   </figure>

CSS:

.grassImageDiv
{
    display: inline-block;
    background-image: url("grass.png");
    width:100%; //To make it browser size independent
    height: 80px;
}

You can give height and width according to your need.

edited Mar 22 '14 at 21:08

answered Mar 22 '14 at 20:40

Ankur Aggarwal

2,993
5
30
56

having an image repeat itself based on browser size

1 Answers1