1

Working Demo: http://jsbin.com/opokev/54

I'm working on having this image as the background image and also have a header as well, however, as the demo shows my header is cutting onto the image.

How can I correct this so that first the header draws and then the background body image draws. I still want to maintain the quality of the image as is without scaling it.

Mike
  • 1,361
  • 2
  • 13
  • 13

3 Answers3

1

Here you go http://jsbin.com/opokev/64/

just changed top: 0 to top: 85px and it works.

  • patrick! you helped me when I asked the question from work. adding `top 85px` makes a horizontal scrollbar appear on the right. – Mike Aug 17 '11 at 02:27
  • I changed `#background img` height to `88%` and `div#masthead` height to `10%` this made the scrollbar disappear! – Mike Aug 17 '11 at 02:40
  • Glad you figured it out, the only other way would be to toss a bunch of containers about to get the effect; however, if you can use percentages, then that is the best route for what you're trying to accomplish. –  Aug 17 '11 at 03:21
0

Try using background-position.

background-position: 0px 85px;

Could do the trick :)

Or you could try just using this:

#background img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 85px;
    left: 0;
    z-index: -1;
}

I can't see any difference in these to backgrounds (thinking about scaling):

http://jsbin.com/opokev/54

http://jsbin.com/ijoyiy/2

Then again, I'm 2min away from sleeping and I haven't got my glasses on ;)

digi
  • 2,719
  • 1
  • 14
  • 17
  • :) appreciate you answering stuff right before sleeping but in your jsbin link the image has a scrollbar. I don't want the scrollbar and don't want the image cutting off – Mike Aug 17 '11 at 01:47
0

Remove the img tag and use background-image for the div#background. Then, set background-position to center 85px.

Combined CSS:

div#background
{
    background:url('http://i52.tinypic.com/33xd1yu.jpg') no-repeat center 85px;
    width:100%;
    height:100%;
}

This will shift the background image down 85px.

Evan Mulawski
  • 54,662
  • 15
  • 117
  • 144
  • You need to keep the width and height attributes at 100%. I should have made it clear to append the above code to yours. – Evan Mulawski Aug 17 '11 at 01:06
  • JSBin may be rendering it incorrectly. Check the Real-Time Preview checkbox and you will see the correct result at the right side of the window. – Evan Mulawski Aug 17 '11 at 14:44