CSS Start Repeating Background from Defined Position

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;
    }

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.

background-repeat: repeat-y; starting position CSS

You can use :before selector to add a pseudo element and position and style it so as to have second background you mentioned. Assuming 518px is height of first background, here is sample CSS to place second background below first.

.box_area {
    width:925px;
    background: url(../../images/verloop.png);
    background-position: 0px 0px, 0px 284px;
    background-repeat: no-repeat;
    padding-left:25px;
    margin-left: 25px;
    padding-right:7px;
    float:left;
    position: relative;
}
.box_area:before {
    content: "";
    height: calc(100% - 518px);
    width: 100%;
    background: url(../../images/whiteback.png);
    background-repeat: repeat-y;
    display: block;
    position: absolute;
    top: 518px;
    z-index: -1;
    margin-left:-25px; /* This is to counter the 25px left-padding in .box-container div */
}

CSS Background Repeat Image Margin Top

As what Derek S said, try using pseudo elements: I created this simple demo that you can check out. It works on your code. So just change to what you need.

I would think this is what you are looking for.

By using:

.moiraitable:before {
    content: "";
    background-image: url("http://i.imgur.com/owEfTJa.png");
    background-position: center top 100px;
    background-repeat: repeat;
    background-size: 100%;
    position: absolute;
    top: 100px;
    width: 500px;
    height: 100%;
    z-index: -10;
}

Demo Fiddle

How can I set a background pattern to begin repeating from the center of my page?

One way is to use the ::after pseudo selector like this:

body::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: url('http://i.imgur.com/2xPV3gf.png') repeat-x left top;
}

Fiddle: http://jsfiddle.net/Vf4Rm/

Pre-define CSS background image center center position and cover background size

You're overwriting the entire background property. Set background-image instead.

.banner-divider{
    width: 100%;
    height:600px;
    background: #fff;
    background-image: none;
    background-repeat: no-repeat; /* <- missing semi-colon */
    background-position: center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#banner-divider-welcome{
    background-image: url(/images/welcome.jpg); /* <- here */ 
}
#banner-divider-second{
    background-image: url(/images/second.jpg);  /* <- and here */
}

.banner-divider{    width: 100%;    height:600px;    background: #fff;    background-image: none;    background-repeat: no-repeat;    background-position: center center;     -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;}#banner-divider-welcome{    background-image: url(https://placeimg.com/100/100/any);}#banner-divider-second{    background-image: url(https://placeimg.com/150/150/any);}

<div class="banner-divider" id="banner-divider-welcome"></div><div class="banner-divider" id="banner-divider-second"></div>

Offset background image and position it centrally

I'll try to give you a much more clear example of what's happening.

We gonna have an div and we gonna mimic the background with an img tag inside that div.

That div is basically an element with overflow:hidden for the background, what i mean is that normally when you set overflow:hidden on an element, if it's content is larger than it, it just hide what's outside.

the background however is not but it has that overflow property to be hidden for it, so if the background is larger it just gets cut of, until you resize it with background-size:100% 100%; to make it fit on both axis.

Example

div {  width: 100px;  height: 100px;  /* to mimic the img being cut of, if it's larger*/  overflow: hidden;  border: 1px solid;  /* to have a visual understanding*/}
.test {  background: url('https://thumb.ibb.co/f1inv8/Adobe_Stock_96159207_Preview.jpg');}

<div class="element">  <img src="https://thumb.ibb.co/f1inv8/Adobe_Stock_96159207_Preview.jpg" class="background"></div>
<div class="test"></div>

How exactly background-size and background-repeat works?

The background disappears when the background-repeat: no-repeat setting is added because of the position that is assigned to the background. It is set at 0px -100px with respect to the origin. You haven't set any value for background-origin and so the default value (which is, padding-box would be used) and the height of the image is only 100px. Because of this when you instruct the browser to not repeat the image, there is nothing in the visible area.

For the case illustrated in demo, the image doesn't need to be cropped because its size is only 100 x 100 (set using background-size) and the div box's size (along with padding of 10px on all sides) is bigger than the image (refer to the below snippet to see this in action).

If you mean to say that you'd like to scale the 600 x 400 image into 100 x 100 using background-size property and display it within the div then you could do it as shown in the below snippet itself.

.div {  /*position: absolute; commented out for demo */  background-image: url(http://dummyimage.com/600x400/000/fff);  padding: 10px;  width: 100px;  height: 100px;  /*background-position: 0px -100px; - this makes it positioned above the viewable area of the box container, so remove it */  background-size: 100px 100px;  background-repeat: no-repeat;  border: 1px solid red;  /* just to show how box is bigger than image */}
/* If the image has to be centered within the div */.div.centered { background-position: 50% 50%; }
/* Just for demo */div{ margin: 10px;}

<div class="div"></div><div class="div centered"></div>

Different x background-positions for rows in a tiled background

If CSS3 is appropriate for your project, you can use multiple backgrounds to do this.

Make an image that is twice the height of your pattern, with the top half filled with your pattern, and the bottom half transparent.

Then use multiple backgrounds to position them accordingly like so:

.div {
    background: url(path/to/image.png) 0 0 repeat,
                url(path/to/image.png) 0 {height of image in pixel} repeat
}

Its not a random offset, but with enough variations to this, it would be hard to tell the difference.

If you want to add to the perceived randomness, have a look at this post.

---

Related Topics