Extend background beyond div element.

Question

Is it possible to extend a background element in a div outside of the div frame?

And a follow-up question pertaining to a workaround I've found:

I've put an <img> in my HTML code positioned behind my main content. That displays the whole background image correctly, but there are scroll bars extending the full length of the image and the of course the image is selectable. Is there a way to remove the scroll bars and make that image non-selectable?

The reason I'm not putting the background image in the body style of the CSS is because I want the background to be attached to my content when the browser window is resized.

Answer 1

Maybe you should try using that image background from CSS and then other elements will not auto resize?

Answer 2

I may not be seeing in my head exactly what you want... but there are CSS attributes to remove scrollbars from items, just use the overflow property and set it to hidden.

http://www.w3.org/TR/CSS2/visufx.html#overflow

If you are just trying to prevent scrollbars on the DIV that is. If you know the size of the image, or it's always going to be the same just set the DIV width and height to be the same as the image and it should display it all.

As far as I know there is no way to make the background content larger than the item displaying it.

Answer 3

Try using an additional wrapper <div>, and set the background-image on that.

Answer 4

Question 1: No.

Question 2: Use the background-image property instead of <img>. You can place that in a containing <div> behind your content, or in the same box as your content. Using background-image will not give you any scrollbars.

Answer 5

You can put your background image outside of your division, but use CSS positioning to keep it in the right place when you resize the browser. A common solution is that the background position is set to center and so is the division, which keeps them in the same place.