Flip Vertically a Background-Image Every Time It Repeat-Y

Flip vertically a background-image every time it repeat-y

This cannot be done using standard CSS3 since there are no CSS3 properties to rotate a background image.

Reference: http://www.w3.org/TR/css3-background

As suggested, combine the two motifs in a single image, much simpler and will always work.

How to flip background image using CSS?

I found I way to flip only the background not whole element after seeing a clue to flip in Alex's answer. Thanks alex for your answer

HTML

<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>

CSS

.next a, .prev a {
    width:200px;
    background:#fff
}
 .next {
    float:left
}
 .prev {
    float:right
}
 .prev a:before, .next a:before {
    content:"";
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    background:url(http://i.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

See example here http://jsfiddle.net/qngrf/807/

Flip background image on repeat-y in CSS

This is the css to do this:

body {
    ...
    background: #eeeeee url("/static/img/background.png") 0 0 repeat-x;
    ...
}

How to generate image background that flips with each duplication in css?

The answer is: You can't. You can not flip a background image using just CSS.

Possible Solutions for you :

Looking at your problem, if you do not want to repeat your image, then set

background-repeat: no-repeat

And you can also set

background-size: cover; 

so that the image covers 100% of your container.

And if you want the flipped image at the bottom of your container then edit the existing image in photoshop and use that as the background image.

Handle space between repeated background image?

Answer base on this.

Suppose we have an apple image:

Step 1. Convert this image to Base64

For example you'll get

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAMDAwMDAwQEBAQFBQUFBQcHBgYHBwsICQgJCAsRCwwLCwwLEQ8SDw4PEg8bFRMTFRsfGhkaHyYiIiYwLTA+PlQBAwMDAwMDBAQEBAUFBQUFBwcGBgcHCwgJCAkICxELDAsLDAsRDxIPDg8SDxsVExMVGx8aGRofJiIiJjAtMD4+VP/CABEIAB4AKAMBIgACEQEDEQH/xAAaAAACAwEBAAAAAAAAAAAAAAAECAUGBwMJ/9oACAEBAAAAAHF7EAEzEstyjOveEdsam+kw+VE5cxH/xAAXAQEAAwAAAAAAAAAAAAAAAAAEAwUG/9oACAECEAAAAMMmE7K3/8QAFwEBAAMAAAAAAAAAAAAAAAAABgMEBf/aAAgBAxAAAAC+sMIJc3//xAAsEAACAQIFBAAEBwAAAAAAAAABAgMEBQAGERIhBxMxQQgyUXEUI0JhYoGR/9oACAEBAAE/AFihQhnZdDhVZjpHFJJzxxtH+nAo6twSe1GPZPOmCkM9wegWWSaSOESylNuyPcdFVuddzaEgfQYeiWJP1Ff74xRWqBF02DuIdHJ5P3xHSgsVPJQDUfTd4Jx1Vzla6LMFfarhUSxx0dLEYo18F5Ru3EYqeplytzSw0s0csZPl4l3Bh4dW03A46EZwuOesiGruJMtTQ1r0jTnzKqqHUn+QDaHE2eZE7kixUsTGIoGJYjX0T9jix5/6mSdVaCkatmpWgucb1w3kwyQw8yFm1O8OuPiNgjzFVx5ntU8ImECU9dTAkb1T5JF3eSPBGLLQXK/3OGgp4vzJXA3yHtov7sx9DHTentmQMqUllpUirNjNNPO+4d2aT5mC68D0Mfi3UEKijjFJZTBf4KsFdy1IcnU6nnHUCaW4TR0xSMRRjdt9E4ioxBMrqiBkYEEeiMZau0lZa43mjVnHBP10x//EAB0RAAEEAwEBAAAAAAAAAAAAAAIAAQMSBBFBE1H/2gAIAQIBAT8AdRQeveIwICcfigySC9htsVjZlIdU2/HRzyOT7d1//8QAHxEAAgIDAAIDAAAAAAAAAAAAAQIDEQAEEhMhBhQi/9oACAEDAQE/AMg+NI+kmxNteMuoZV5v0cnjMEzx2DyavNVDFDMsZUB669Xg+2IUTyjkD8jH1kZyWom8/9k=

Step 2: Insert this Base64 to SVG

'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="40"><image width="40" height="40" xlink:href="[paste it here]" /></svg>');

Step 3: copy this to CSS background-image

To get 10px space we have 50px width for CSS background-image, 40px for image tag of svg, 50 – 40 = 10 px.

body {    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="40"><image width="40" height="30" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAMDAwMDAwQEBAQFBQUFBQcHBgYHBwsICQgJCAsRCwwLCwwLEQ8SDw4PEg8bFRMTFRsfGhkaHyYiIiYwLTA+PlQBAwMDAwMDBAQEBAUFBQUFBwcGBgcHCwgJCAkICxELDAsLDAsRDxIPDg8SDxsVExMVGx8aGRofJiIiJjAtMD4+VP/CABEIAB4AKAMBIgACEQEDEQH/xAAaAAACAwEBAAAAAAAAAAAAAAAECAUGBwMJ/9oACAEBAAAAAHF7EAEzEstyjOveEdsam+kw+VE5cxH/xAAXAQEAAwAAAAAAAAAAAAAAAAAEAwUG/9oACAECEAAAAMMmE7K3/8QAFwEBAAMAAAAAAAAAAAAAAAAABgMEBf/aAAgBAxAAAAC+sMIJc3//xAAsEAACAQIFBAAEBwAAAAAAAAABAgMEBQAGERIhBxMxQQgyUXEUI0JhYoGR/9oACAEBAAE/AFihQhnZdDhVZjpHFJJzxxtH+nAo6twSe1GPZPOmCkM9wegWWSaSOESylNuyPcdFVuddzaEgfQYeiWJP1Ff74xRWqBF02DuIdHJ5P3xHSgsVPJQDUfTd4Jx1Vzla6LMFfarhUSxx0dLEYo18F5Ru3EYqeplytzSw0s0csZPl4l3Bh4dW03A46EZwuOesiGruJMtTQ1r0jTnzKqqHUn+QDaHE2eZE7kixUsTGIoGJYjX0T9jix5/6mSdVaCkatmpWgucb1w3kwyQw8yFm1O8OuPiNgjzFVx5ntU8ImECU9dTAkb1T5JF3eSPBGLLQXK/3OGgp4vzJXA3yHtov7sx9DHTentmQMqUllpUirNjNNPO+4d2aT5mC68D0Mfi3UEKijjFJZTBf4KsFdy1IcnU6nnHUCaW4TR0xSMRRjdt9E4ioxBMrqiBkYEEeiMZau0lZa43mjVnHBP10x//EAB0RAAEEAwEBAAAAAAAAAAAAAAIAAQMSBBFBE1H/2gAIAQIBAT8AdRQeveIwICcfigySC9htsVjZlIdU2/HRzyOT7d1//8QAHxEAAgIDAAIDAAAAAAAAAAAAAQIDEQAEEhMhBhQi/9oACAEDAQE/AMg+NI+kmxNteMuoZV5v0cnjMEzx2DyavNVDFDMsZUB669Xg+2IUTyjkD8jH1kZyWom8/9k=" /></svg>');}

---

Related Topics