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

fishingoutdoors.co.nz

9anime.pe

betorys1.nl

doradao.xyz

lusiva.pt

changelink.me

ageha-inc.jp

pierfrancescovincenti.it

badbanana.co.uk

wrestling.cafe

CSS: How to position background image

Established Member

Established Member

Established Member

Established Member

Attachments

Top Member

Established Member

HealthFreedom.com

Crux.co

Eagle.co

Whatap.com

gaire.com

pressurizer.com

TerraceCove.com

Mawaddah.com

VisibleCare.com

RIMG.com

Similar threads

We're social

HealthFreedom.com

Crux.co

Eagle.co

Whatap.com

gaire.com

pressurizer.com

TerraceCove.com

Mawaddah.com

VisibleCare.com

RIMG.com

Pinned

Appreciation

Preference

Appreciation

Upvoting

Agreement

Answers

Decisions

Relevance

Reaction

Facial expressions

Vocal expressions

Status

Workflow

Clarification

Feeling

Sympathy