CODEWITHSUNDEEP
css
Tim Marshall
Tim Marshall

Reputation: 360

When Tiling Background Image -> Set Background Multiple Of Tile?

Simple Square Image Tile Example: - 49x50px

Square black bordered image 49x50px

Tiling This Image - 125x50px container example

Simple Black Square Repeated Y in 125x50px container example

Question:

Using CSS only, is it an attribute or any other means to set a container with an auto height attribute of auto to be a rounded up multiple of the background image height to ensure the tile is not cut off?

Why / My Usage:

One of my usages is to have a scroll. The top and bottom all fancy and old looking whereas the middle will be an image repeated on the y-axis, however if there is not a perfect match at the bottom, it can result in a noticeable line loosing the effect of one image / container!

Upvotes: 0

Views: 728

Answers (2)

vals
vals

Reputation: 64184

As far as I know, you can not do that with CSS.

You can, however, do the opposite: adjust the image to the dimension of the container

.test {
border-style: solid;
border-width: 14px 0px 0px;
-moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round;
-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round;
-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 round;
border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 fill round;
}

#test1 {
  width: 100px;
}

#test2 {
  margin-top: 80px;
  width: 120px;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>

This is achieved with the round style of the border image property

That would set all 4 borders of the image, but I have set the other borders to dimesion 0, so all you get is a stripe of the image tiled, and adjusted to fit

See border image generator to see it alive.

Also, see it applied to an example similar to the one in your question. hover to div to see the image adapting to the size

.test {
    width: 50px;
    height: 125px;
    border: solid black 1px;
    position: relative;
    transition: all 4s;
}
.test:hover {
    height: 400px;
}

.test:after {
    content: "";
    position: absolute;
    width: 0px;
    height: 100%;
    left: 0px;
    top: 0px;
    border-left-width: 50px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-image-source: url(http://www.w3.org/TR/css3-background/border.png);
    border-image-slice: 27;
    border-image-repeat: round;
}
<div class="test"></div>

Upvotes: 0

Lynch
Lynch

Reputation: 910

Just need to use the background-repeat property

.container {
  background-image: url(URL_HERE);
  background-repeat: repeat-y;
}

That will tile the background image in the y axis as many times as it can to fill the element

Upvotes: 1

Related Questions