CSS positioning and repeating backgrounds help

[snike]

Is it possible to have a background start at point (0px,110px) and repeat downward? Is there anyway to do this or mimick this?

Thanks in advace.

 

[Sergio965]

Sure. You could create a div and do this:

#div {
position: absolute;
top: 0px;
left: 110px;
width: 300px;
height: 100px;
background: url(background.gif) repeat-y;
}

Basically, this well place your image 110 pixels to the right of the top left corner of the screen and repeat your background down from there with the constraint of 300px width. To call it, use: <div id="div"></div> Of course.

:tu:

 

[name-cloud]

Or you could use body {background-position: 0 110px;}. Check www.w3schools.com

 

[snike]

Thanks! I'll try it out soon and I'll let u know/

This did not work the way i wanted it to. The text shouldn't start where the background starts but at the top where there is no background and continue downward.

Sorry. Is this possible?

 

[nasaboy007]

you would have to make multiple divs then, one without the backgruond (for the text) and then the second one with the background.

or you could just position the backgruond div usign absolute (so its down further) and then use something like margin-top:-200px; or w/e, but im not sure if that'll work.

 

[Sergio965]

Thanks! I'll try it out soon and I'll let u know/

This did not work the way i wanted it to. The text shouldn't start where the background starts but at the top where there is no background and continue downward.

Sorry. Is this possible?

I'm not too familiar with the "background-position" element of CSS, but it seems like it might do the trick without using so much code. Either way, this is the code I came up with.

CSS:

#text {
background-image: url(bg.jpg); //Picture we will use.
background-repeat: repeat-y; //States to repeat on the y axis (vertically.)
background-position: 110px 100px; 
// Background Position moves the background 110px right and 100px down within its current element. It will not move the background itself, but within the container...
height: 300px; //Sets the height of the div.
}

<=== or ===>

#text {
background: url(bg.jpg) repeat-y 110px 100px; //Condensed.
height: 300px;
}

HTML

<div id="text">Your text here.</div>

And there you have it. Do note that they above form of coding in CSS isn't quite standard and thus shouldn't be used unless you're trying to teach someone the elements in the condensed version.

Good Luck! :tu:

 

[snike]

Thank you everyone!!!

It worked out fine. Thanks!