Repeat Image Horizontally and Vertically

Repeat image horizontally and vertically

As my comment already said: use

bluePatternView.backgroundColor = 
  [UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_pattern.png"]];

You dont want to stretch your image. Let UIKit take care of the repetition.

Assuming that your bluePatternView is the actual large view for which you want to set a pattern as background. Maybe you are setting the background property of the wrong view if that code is still not working.

Note: duplicating the SAME image with @2x and @3x extension will lead to behaive properly for better resolution devices.

Sample Image

Repeating an image horizontally (non-background image)

Try like this: Demo

<div id="rd"></div>

CSS:

#rd {
    position: absolute;
    height: 50px;
    width: 100%;
    top: 300px;
    background: url(http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg) center repeat-x;

    background-size: auto 100%;
}

Edit: Demo with fade on both sides

#rd {   
    height: 50px;
    width: 100%;
    top: 300px;
    background: url(http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg) center repeat-x;    
    background-size: auto 100%;    
    position: relative;
   display: inline-block;
}

#rd:before{   
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);      
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));     
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);      
  background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);     
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);    
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);     
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);   
}

center image horizontally and repeating vertically

You need to make sure your Container has the full height you want. To fill the whole screen you can do this:

Container(
  height: double.infinity,
  child: Image.asset('test.png',
    repeat: ImageRepeat.repeatY,
    alignment: Alignment.topCenter,
  ),
);

Repeat image in view horizontally and vertically

Here is what you need,

self.imageView.image = UIImage(named: "abcd.png")!.resizableImage(withCapInsets: .zero)

Thats all buddy :)

How to repeat an image vertically & horizontally?

Try this:

    <html>
<head>
<title>IOP</title>
<style>
body > header {
  background : url("a.png") repeat-x scroll 0 0 transparent;
  box-shadow : 0 1px 4px rgba(0, 0, 0, 0.2);
  width : 100% 
  position : relative;
  z-index : 10; 
  height: 57px; }
 #MAN {
  height:500px;
  width: 500px;
  padding : 30px 0 25px;
  background: url("XYZ.png") repeat ;
  }

</style>
</head>
<body>
<header></header>
<div id="man">
</div>
</body>
</html>

Add width and height to #MAN in pixels. Usualy height and width 100% will take size of its parrent. Try using wrapper div that will have widht 960px, and then inside wrapper every element with width 100% will take 960px width.
This is joust from my head didnt tested. Hope its ok. I havent wrote any html css for months now :(

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.

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.

How to make a background image repeat horizontally?

Try this out:

<div style="height: 100px; background-image:url('picture.jpg'); background-repeat:repeat-x;">
Your text here.
</div>

Repeat Image Horizontally and Vertically