CSS: How to position background image

vivsin · Mar 6, 2009

Hello NPer's

I am trying to position background image of a Div with repeating Y axis

I have done something like:

background:url(image) center repeat-y;

Things are ok so far, but now I want that the should start repeating after 100px,
In other words I want my image to have a top margin of 100px and then start the repetition

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

bbrez1 · Mar 6, 2009

Just set the current container (div?) to padding-left:100px ?

HTML code would look something like this:

<div id="content">
<div id="bg">Background</div>
</div>

This means that the div with id="bg" will be moved 100px to the right and this div has a background.

Hope you understand what i mean

hawkaw · Mar 7, 2009

You can try to do this by extending your CSS-code:

Code:

background:url(image) center repeat-y [I]fixed 0px 100px[/I];

vivsin · Mar 19, 2009

Still no results.

Here is a sampple code i have created

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rocky's Playground</title>

<style type="text/css">
body{background:#FFF; margin:0; padding:0;}
#div1{background:url(1.png); height:500px;}
#div2{background:url(2.jpg) repeat-y center;
height:500px; margin:0 auto; width:800px;}
</style>
</head>

<body>

<div id="div1">
<div id="div2">
</div>
</div>

</body>
</html>

I have also attached all files in a zip.

One thing here, I dont want to achieve that result by aligning whole DIV

DIV content should start from top, and only the background image should have top margin

enlytend · Mar 19, 2009

Try using the background-position property on that div.

Example: background-position: 50% 100px;

vivsin · Mar 29, 2009

enlytend said:
Try using the background-position property on that div.

Example: background-position: 50% 100px;

I know this one, the problem is it works fine only if I set NO-REPEAT, whenever i change from no-repeat to repeat-y, it starts from top

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-position

CSS: How to position background image

Established Member

Established Member

Established Member

Established Member

Attachments

Top Member

Established Member

Al-Nakheel.net

Azaor.com

TLOS.ORG

scheduleclutter.com

Coconut.gr

IntelligentParkingSolutions.com

GreeneGardens.com

maximotive.com

NovaVita.net

AffordableseniorhomeCare.com

Similar threads

We're social

Al-Nakheel.net

Azaor.com

TLOS.ORG

scheduleclutter.com

Coconut.gr

IntelligentParkingSolutions.com

GreeneGardens.com

maximotive.com

NovaVita.net

AffordableseniorhomeCare.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling