Vertically Stretch Background Image

how to make background image stretch vertically

try to make header-image container relative

.row {
   position:relative;
}

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.

CSS3 background image doesn't vertically stretch

Setting the height to 100vh will give you what you need.

.view-index {  background: url("http://i.imgur.com/f6f5Xq7.jpg") no-repeat center center;  background-size: cover;  display: -webkit-flex;  display: flex;  height: 100vh;}
.view-text {  color: white;  margin: auto;  text-align: center;}

<div class="container">  <div class="view-index">    <div class="view-text">      <h2>This Navbar isn't fixed</h2>      <h5>When you scroll down it will disappear</h5>      <br>      <p>Full page intro with background image will be always regardless of device </p>    </div>  </div>  <div class="view-extra">    <img src="http://i.imgur.com/0NCooNY.jpg">  </div></div>

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.

stretch horizontally background image in CSS

From what I understood, what you want to do is simply stretch the images to both sides, but keep the original height, right?

I assume you know the height of the image. For this example we'll use an image with a height of 15px.
Then you can just use:

background-size: 100% 15px;

As can be seen in this fiddle https://jsfiddle.net/o3czsv9b/2/ the picture is stretched to the sides, but keeps it's height. That makes it look squished.

From what the name of your image it sounds like you're trying to place a picture of a line. If you want to extend something to the sides, sometimes

background-repeat-x: repeat;
background-repeat-y: no-repeat;

can give you the desired result. That depends on your image though.
Check out this fiddle: https://jsfiddle.net/o3czsv9b/1/

How to stretch the background image to fill a div

Add

background-size:100% 100%;

to your css underneath background-image.

You can also specify exact dimensions, i.e.:

background-size: 30px 40px;

Here: JSFiddle

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.