1

What I have to begin with: http://jsbin.com/opokev/39

Problems

  • the image scales and compresses according to the browser window size. For example If I open firebug (which takes half of the page) the background image compresses and does not look good.

Requirements

  • I don't want the image to be cut off from the bottom or up
  • I need a Header on top that is about 85px
  • I don't want the horizontal or vertical scrollbar on the webpage.

I've asked questions before but have gotten mixed answers, I'm really struggling with this. I am trying to get something like the background image on livingsocial.com only difference being that I don't want my header to take over part of the image like theirs.

yogashi
  • 273
  • 1
  • 5
  • 11

2 Answers2

2

I see your background image problem. You have it set as an image in a div. Why not get rid of that, and just apply the following to the css:

body {
background-image: http://i53.tinypic.com/347a8uu.jpg;
background-repeat:none;

}

Or if for some reason you need to keep it as a div, just get rid of position: absolute;

For the header, just add a div right after <body like so:

<div class="header_wrapper"></div>

And the css:

.header_wrapper {

width: 85px;
margin-left:auto;
margin-right:auto;
}
Jonah Katz
  • 5,230
  • 16
  • 67
  • 90
  • I've implemented your solution but that adds a scrollbar on the webpage: http://jsbin.com/opokev/78 ....will the scrollbar be OK when I start adding content to the webpage? I would like to NOT have the scrollbar though. – yogashi Aug 19 '11 at 17:51
0

If it is a background then why are you adding it as an img?

CSS...

background:url("http://i53.tinypic.com/347a8uu.jpg" center top no-repeat;
background-size:cover;
Duncan Gravill
  • 4,552
  • 7
  • 34
  • 51
  • you may or may not want to use background-size:cover; as this makes the image scale with the window... http://www.w3schools.com/cssref/css3_pr_background-size.asp – Duncan Gravill Aug 19 '11 at 17:56
  • adding `center top` does show the image however, again, it is being cut off: http://jsbin.com/opokev/81 – yogashi Aug 19 '11 at 18:00
  • I'm not seeing anything cut off. I suggest you clear your browser cache and look again... It should be working fine. – Duncan Gravill Aug 19 '11 at 18:04