CODEWITHSUNDEEP
css
NullVoxPopuli
NullVoxPopuli

Reputation: 65183

How can I set background-position with repeat?

I currently have an image repeating on y (e.g. background: url() repeat-y), but I want it to start 20px down from where the div starts.

how do I do that?

Upvotes: 21

Views: 26600

Answers (5)

sandeep
sandeep

Reputation: 92863

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(https://picsum.photos/400/200) repeat-y;
}
h1 {
  position: relative;
  color: green;
  font-size: 30px;
  z-index: 1;
}
<div class="container">
  <h1>Hello world</h1>
</div>

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

Upvotes: 42

moey
moey

Reputation: 10907

I don't think simply combining background-position and background-repeat e.g. repeat-y 0 20px will work. Assuming this jsFiddle sample represents OP's case, the solution should make the green background starts at (vertical) 20px; the "Hello there!" text shouldn't sit on top of the green background.

My answer is this cannot be done plainly by CSS; meaning, you might want to change your HTML structure to accomplish your goal. However, I am starting a bounty hoping others to come up with better answers.

Upvotes: 1

Jon Harding
Jon Harding

Reputation: 4946

I prefer the shorthand method:

.yourClass {
    background: url(../images/yourImage.png) repeat-y 0 20px;
}

Upvotes: 0

Dutchie432
Dutchie432

Reputation: 29170

.yourClass{
    background: url(images/yourImage.png) repeat-y;
    background-position: 0px 20px;
}

http://www.w3schools.com/css/pr_background-position.asp

Upvotes: -1

Justin Niessner
Justin Niessner

Reputation: 245499

You just need the background-position property to be set:

background-position: 0px 20px;
background-repeat: repeat-y;

Upvotes: -2

Related Questions