Positioning a background image in a div to start at a certain point

Question

I am trying to add a background image to a div that will extend the height of a page. My issue is that at the top of this div is a logo with a transparent background. I dont want the background image of the div to appear below the logo image.

Is there a way to tell the background image to not start appearing until a certain pixel point? So if the logo is 200px in height can i have the bg image not start appearing until 210px down within the div?

Click on the check mark on the left of an answer and it will turn green — Matt Hintzke, Jul 19 '12 at 15:45

score 0 · Answer 1 · answered Jul 19 '12 at 15:26

0

Just add top:210px to the css for that div.

answered Jul 19 '12 at 15:26

imakeitpretty

2,108
5
16
16

Ana · Accepted Answer · 2012-07-19T16:03:18.763

0

You could use background-clip: content-box; - demo

Even better, you could set background-clip: padding-box and set a big transparent top border instead of a big transparent top padding to make sure it works in Opera as well - demo.

edited Jul 19 '12 at 16:03

answered Jul 19 '12 at 15:44

Ana

35,599
6
80
131

thanks everyone. i ended up getting it to work by recutting the bg image to have the space atop it required to allow the logo to be transparent. – Deep Rooted Jul 19 '12 at 18:13

Positioning a background image in a div to start at a certain point

2 Answers2