stretch horizontally background image in CSS

Question

I know this question was asked really often here, but none of the existing solutions hepled me. I have a horizontal empty block with a decorative ribbon which I have to stretch horizontally to fill the whole viewport.

 #upper-line { background: url(../images/upper-line.png) no-repeat; position: relative; margin: 0; padding: 0; width: 100%; height: 133px; background-size: cover; } 

  <div class="container-fluid"> <div id="upper-line"></div> </div> 

The problem is that I have to stretch it only horizontally without the image changing vertical proportions or moving. I also want to use relative position in order to not to screw blocks that are above so I can't use enormous height value with absolute position. I'm trying to solve the problem with background-size property, but it the image just moves in the diagonal directions out of the block borders where it's not visible whenever i just don't increase height value.

  background-size: 100% 100%; 

This one didn't help me either - it stretches the image horizontally and keeps in proportions with navbar but squeezes it vertically and I have to keep the height- just horizontal stretching. Any help will be appreciated.

PS Which property/values make a block without content, just with a background image appear on the window?

Answer 1

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/