March 31, 200917 yr Hey everyone, I want to have an image behind the content of a site, positioned at the bottom left of the content div. The problem is, I need it to be sticking out to the left by about 50px. This makes the overall width of the site around 1020px which is too wide for a 1024 monitor. I'd like the background image to move outside of the window without showing scrollbars, but show all of it when the window is wide enough to accomodate. Does anyone have any ideas how I could do this? Let me know if you need it explained further. Thanks
March 31, 200917 yr Firstly, nice folio Secondly, is the background image set in a div or the body tag? And can you just use the overflow:hidden property? Just a stab in the dark, got a link or an example page?
March 31, 200917 yr Author Hi bocaj, thanks! It would need to be a div I think, as it needs to be in the same position relative to the content div. overflow:hidden was my first plan, but if the window was less than 960px then the content would be inaccessible as there would be no way to scroll. I've attached an image of what I want to do, I've got a much better one with a browser overlay at home. I'll post that later if we don't find a solution.
March 31, 200917 yr Author Here's how I want it to show on a 1024x768 screen. If the window was any smaller than 960px (the width of the content box) scrollbars should appear. I'm not sure if this is even possible with CSS alone.. might be that I need to use javascript to get the width of the window when it's resized and set the background image accordingly. What do you guys think?
March 31, 200917 yr body { background-image: blah; background-repeat: blah; background-position: bottom left; background-attachment: fixed; } Would that do it for you? *edit, you may not want it to be fixed. *edit, edit, you can position background elements by pixel i think.
March 31, 200917 yr Author body{ background-image: blah; background-repeat: blah; background-position: bottom left; background-attachment: fixed; } Would that do it for you? *edit, you may not want it to be fixed. *edit, edit, you can position background elements by pixel i think. The problem is I need the background to be positioned in the same place relative to the content. It's effectively a background image on a parent div, so will trigger scrollbars if the window is smaller than the divs width. I don't want scrollbars to be shown for this div, but I do want them with the content div. Does that make sense?
March 31, 200917 yr Alright I got ya, Simple fix then, like realllly simple. Just put another wrapper div around your site, specify its width to be what you need, and fix it to the bottom of there. This will work, 100% gauaranted. Oh wait, you don't want the scrollbars though, drrr.... Actually you can make the width of the wrapper div to be 100% and do all the background image stuff. If it so happens 100% of the page is big enoug i.e big enough resolution then you will see more of the image. Also, a good practice to sort out scrollbars in your document is to apply an attribute to the html tag of the document html { overflow: scroll; } Hope that works, it works in my mind. but may not in practice.
March 31, 200917 yr Author Actually you can make the width of the wrapper div to be 100% and do all the background image stuff. If it so happens 100% of the page is big enoug i.e big enough resolution then you will see more of the image. This wouldn't keep it in the same place on the content box, it would move independently as the content is centered. One way it would work was if the site was left aligned.. but I'd rather avoid that if possible.
April 6, 200917 yr Author In case anyone has this same problem, I worked out a solution. It was actually very simple.. but isn't that always the way. The background image just needed some whitespace to the right of the flower - the same size as the content box. I then horizontally centered this and offset it from the top. Problem solved..
Create an account or sign in to comment