Background Image Stretch Y-Axis Only, Keep Repeat-X

Background image stretch y-axis only, keep repeat-x

I had this problem too. It's easy in most browsers, but IE8 and below it's tricky.

Solution for modern (anything not IE8 and below) browsers:

#scroller_shadow {
    background: url(../img/ui/shadow.png) center repeat-x;
    background-size: auto 100%;
}

There are jQuery plugins that can mimic background-size for IE8 and below, specifically backgroundSize.js but it doesn't work if you want it to repeat.

Anyways thus begins my terrible hack:

<div id="scroller_shadow">
    <div id="scroller_shadow_tile">
        <img src="./img/ui/shadow.png" alt="Sample Image" >
        <img src="./img/ui/shadow.png" alt="Sample Image" >
        <img src="./img/ui/shadow.png" alt="Sample Image" >
        ...
        <img src="./img/ui/shadow.png" alt="Sample Image" >
    </div>
</div>

Make sure to include enough <img>'s to cover the area needed.

CSS:

#scroller_shadow {
    width: 500px; /* whatever your width is */
    height: 100px; /* whatever your height is */
    overflow: hidden;
}

#scroller_shadow_tile {
    /* Something sufficiently large, you only to make it unreasonably wide if the width of the parent is dynamic. */
    width: 9999px;
    height: 100%;
}

#scroller_shadow_tile img {
    height: 100%;
    float: left;
    width: auto;
}

Anyways, the idea is to create the stretch effect from the images.

JSFiddle.

CSS - Background image stretch horizontally and repeat vertically?

Instead of cover, use background-size: 100% auto; to size the background image to full browser width while maintaining aspect ratio for its height. Use this in conjunction with background-repeat: repeat-y; to tile it vertically.

Stretch and scale a CSS image in the background - with CSS only

CSS3 has a nice little attribute called background-size:cover.

This scales the image so that the background area is completely covered by the background image while maintaining the aspect ratio. The entire area will be covered. However, part of the image may not be visible if the width/height of the resized image is too large.

Background image stretch vertically, but repeating horizontally

Subclass UIView call it something like BackgroundImageView or something it override drawInRect thusly:

import UIKit
@IBDesignable
class BackgroundImageView: UIView {
    @IBInspectable var backgroundImage:UIImage?{
        didSet{
            self.setNeedsDisplay()
        }
    }

    override func drawRect(rect: CGRect) {
        var i:CGFloat = 0.0
        if backgroundImage != nil
        {
            while (i*backgroundImage!.size.width)<self.bounds.size.width
            {
                backgroundImage!.drawInRect(CGRect(x: i*backgroundImage!.size.width, y: 0.0, width: backgroundImage!.size.width, height: self.bounds.size.height))
                i+=1.0
            }
        }
    }

}

Drag out a UIView in IB change its class to BackgroundImageView and set the backgroundImage to background.png.

Stretch and scale CSS background

For modern browsers, you can accomplish this by using background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover means stretching the image either vertically or horizontally so it never tiles/repeats.

That would work for Safari 3 (or later), Chrome, Opera 10+, Firefox 3.6+, and Internet Explorer 9 (or later).

For it to work with lower verions of Internet Explorer, try these CSS:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

css background image repeat until specific height

hope it will help you

.youclass:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url(path/image.png) repeat-y;
}

demo

Image on body not repeating even when specifying repeat-x

To get the effect that you want, first the width of the div needs to be bigger than height in order to see the repeat image in x-axis for example:

CSS:

.header {
    height: 120px;
    width: 460px; // <-- this needs to be bigger than height
    display:block;
    background-image:url(logo.gif);
    background-repeat: repeat-x;
    background-size: contain;
}

Here's the: example

CSS way of looping a background image with cover or contain sizing

The problem is that, to make it responsive, you need to set the animated background-position using percentages.

But, when you set background-size as cover or contain, in some cases the width is adjusted to 100%. In this case, background-position using percentages is useless (won't move it).

The only way that I have found to manage this is moving the image to a pseudo element, and moving it. To keep the continuity, though, we will need two pseudo elements.

But that won't work on a textarea.

You didn't said anything about textarea being a requirement, so I am posting this. To show that it works on resize, hover it.

.container {  width: 160px;  height: 100px;  position: relative;  border: solid 1px black;  display: inline-block;}.container:nth-child(2) {   width: 220px;  }.bg {    position: absolute;    width: 100%;    height: 100%;    overflow: hidden;}
.bg:before, .bg:after {    content: "";    position: absolute;    width: 100%;    height: 100%;    background-image: url(http://i.stack.imgur.com/wBHey.png);    background-size: 100%;    animation: move 2s infinite linear;}
.bg:before {    right: 100%;}
@keyframes move {    from {transform: translateX(  0%);}      to {transform: translateX(100%);}}

<div class="container">  <div class="bg"></div></div><div class="container">  <div class="bg"></div></div>

---

Related Topics