Css: Background Position with Repeat

CSS: background position with repeat?

Maybe you should use :after or :before for this, because there's no need to add extra markup in your HTML. Like this:

.container{
    height:400px;
    background:red;
    position:relative;
    width:400px;
}
.container:after{
    content:"";
    position:absolute;
    top:20px;
    left:0;
    right:0;
    bottom:0;
    background:url(http://lorempixel.com/400/200) repeat-y;
}

Check this http://jsfiddle.net/h6K9z/

It works in IE8 & above. For IE7 or IE6 you can give extra DIV for this.

CSS: Background-position + repeat = not working

Am I missing something here? Why can't I tell my background to start tiling horizontally from x-coordinate 500?

background-position does not set the origin of the background from which to repeat rightward or downward. It simply shifts the entire background a certain distance along the x and y axes respectively.

When you specify a background to repeat along an axis, it always tiles infinitely in both directions along that axis (i.e. left and right along the horizontal axis, up and down along the vertical axis). You won't be able to change this using CSS's background properties.

Does background-size:cover make background-position:center and background-repeat:no-repeat unnecessary?

While the question looks opinion-based at first sight, and the answer seems to be "it doesn't matter", the reality is it does.

Take this example where you put a 100×100 image as a background in a 300×150 container.

In the absence of any other styles, the background-position is 0% 0% (see W3C) and it looks like this:

div {
  width:300px; height:150px;
  background-image: url('https://via.placeholder.com/100x100');
  background-size:cover;
}

<div></div>

Css background: offset for repeating-linear-gradient

You might use background-position property.

.repeating-grid {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  background-size: $major-grid-size $major-grid-size;
  background-image:
    repeating-linear-gradient(0deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
    repeating-linear-gradient(-90deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
    repeating-linear-gradient(0deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size),
    repeating-linear-gradient(-90deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size);

  background-position: 15px 0;
}

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>

CSS Fail - background-position, background-repeat, background-size, background-attachment

Hmm. Seems you are overwriting your CSS. Using backgorund: url('./images/pic.jpg') as an inline style is the problem. You are overwriting all of your CSS properties (background-position, background-repeat, etc...) with this inline style. Replace backgorund: url('./images/pic.jpg') with backgorund-image: url('./images/pic.jpg').

css start repeating background from defined position

background : url('image path') 0px 287px repeat-y;

This will repeat vertically your background image from 287px from top.

but another way is to set this to your content div :

margin-top:287px;

you best solution is to do like this :

#container{
    position:relative;
    }

#background{
    background:url('image url');
    position:absolute;
    top:287px;
    left:0px;
    z-index:100;
    }  

#content{
    position:absolute;
    top:0px;
    left:0px;
    z-index:99999;
    }

---

Related Topics