CODEWITHSUNDEEP
htmlcss
Paul Designer
Paul Designer

Reputation: 865

How do I make an image repeat by modifying the css and html

I am trying to repeat an image .middle-container-line in relation to the left and right container.

Basically as more images are inserted, I want the .middle-container-line image to repeat y axis (down) and follow the images that are inserted.

So i dont want to specify a height using pixals as I want the upload of images to determine how long down the line repeats.

Is this possible?

Here is my code: http://jsfiddle.net/F9R4P/

CSS:

.main-container {
    width:600px;
}
.image {
    height:100px;
    width:100px;
    background:black;
    color:white;
    margin:20px 0 0 20px;
}
.left-container {
    height:1000px;
    border:1px solid red;
    float:left;
    width:39%;
}
.middle-container-line {
    float:left;
    width:20%;
    height:100%;
    border:1px solid green;
    height:100%;
    min-height:200px;
    background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y;
}
.right-container {
    border:1px solid blue;
    float:left;
    width:39%;
    height:100%;
}

Upvotes: 0

Views: 124

Answers (5)

Marc Audet
Marc Audet

Reputation: 46785

Here is one way of doing it using table-cells:

.main-container {
    width:600px;
    display: table;
}
.image {
    height:100px;
    width:100px;
    background:black;
    color:white;
    margin:20px 0 0 20px;
}
.left-container {
    display: table-cell;
    width:39%;
    border:1px solid red;
}
.middle-container-line {
    display: table-cell;
    width:20%;
    border:1px solid green;
    background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y;
}
.right-container {
    display: table-cell;
    width:39%;
    border:1px solid blue;
}

See demo at: http://jsfiddle.net/audetwebdesign/6fhfG/

Instead of using floats, apply display: table to your parent container (.main-container), and then display: table-cell to .left-container, .middle-container-line, and .right-container.

The resulting layout will have 3 columns that are all the same height, and the overall height will be determined by either the left or the right container depending on how many images are in each.

By using CSS tables, the three columns will always stay on a single line, depending on whether or not you need a responsive design instead of fixing the width of the parent container.

Note: Apply text-align: center to .left-container and .right-container is you want the images centered horizontally within each column.

Upvotes: 1

Rajiv Ranjan
Rajiv Ranjan

Reputation: 1869

You need to add Jquery Library to find out max height. Either left or right div will have max height.

Add jQuery library in your page, if not added. http://code.jquery.com/jquery-1.8.3.min.js

Check it here: http://jsfiddle.net/F9R4P/8/

<div class="main-container">
<div class="left-container">
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
</div>
<div class="middle-container-line"></div>
<div class="right-container">
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
</div>


    jQuery(document).ready(function(){
      var leftHeight = $( ".left-container" ).height();
     var rightHeight = $( ".right-container" ).height();
    if(leftHeight>rightHeight)
      $(".middle-container-line").css('height',leftHeight);
    else
        $(".middle-container-line").css('height',rightHeight);

});

.main-container {
    width:600px;
}
.image {
    height:100px;
    width:100px;
    background:black;
    color:white;
    margin:20px 0 0 20px;
}
.left-container {
    height:1000px;
    border:1px solid red;
    float:left;
    width:39%;
}
.middle-container-line {
    float:left;
    width:20%;
    border:1px solid green;
    min-height:200px;
    background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y;
    display:table-cell;
}
.right-container {
    border:1px solid blue;
    float:left;
    width:39%;
    height:100%;
}

Upvotes: 2

cmsonnet
cmsonnet

Reputation: 45

You can actually combine the whole code together like this:

.bgclass{
    background:url(images/mybg.jpg) repeat;
}

For css reference background you can have a quick look in here: http://www.overpie.com/css/tutorials/css-background

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115098

Simply remove the middle div from the HTML completely, float the right side div to the right and put the bg image on the container.

JSFiddle DEMO

HTML

<div class="main-container">
    <div class="left-container">
        <div class="image">this is image</div>
        <div class="image">this is image</div>
        <div class="image">this is image</div>
        <div class="image">this is image</div>
        <div class="image">this is image</div>
        <div class="image">this is image</div>
        <div class="image">this is image</div>
        <div class="image">this is image</div>
    </div>
    <div class="right-container">
        <div class="image">this is image</div>
        <div class="image">this is image</div>
        <div class="image">this is image</div>
        <div class="image">this is image</div>
    </div>
</div>

CSS

.main-container {
    width:600px;
    overflow:hidden;

   background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y;
}

.image {
    height:100px;
    width:100px;
    background:black;
    color:white;
    margin:20px 0 0 20px;
}

.left-container {
    height:1000px;
    border:1px solid red;
    float:left;
    width:39%;
}


.right-container {
    border:1px solid blue;
    float:right;
    width:39%;
    height:100%;

}

Upvotes: 1

Emma
Emma

Reputation: 57

Have you tried using

.middle-container-line
{
background-image:url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png");
background-repeat:repeat-y;
}

taken from: http://www.w3schools.com/cssref/pr_background-repeat.asp

Upvotes: 1

Related Questions