Making the background of a div stretch beyond it's width

HTML & CSS
1

So i’m making a new design for one of my sites:

http://psdesignzone.com/images/newdesign.png

And i’m trying to figure out how I would do the character in the top right properly (his names Aang if you’ve never seen the show).

I’m trying to optimize the design for 1024x768 resolution screens and Aangs arm stretches beyond that limit, so if I set the width of the div to compensate for his arm the horizontal scroll bar would show up very annoyingly on users with a 1024x768 resolution (my most common viewer type).

How can I set the width to that background div to a width like 1000px but then still show Aangs arm without having it stretch the width needed to see the entire site.

GameSpot is your go-to source for video game news, reviews, and entertainment does it with the ads they have along the right and left of their website. If you shrink the viewport down to 1024x768 they don’t see the ads and they also don’t see a horizontal scroll bar.

I hope that makes sense! :slight_smile: Thanks for any help or ideas on the CSS of tackling this design.

2

Set the content div to whatever px width you want, then a container div to 100% and put the image as a background in that.

Without seeing your actual code, it’s going to be difficult for someone on the forums to suggest a specific solution for your particular design.

3

Yeah I haven’t started the coding of it yet, but I will soon, that’s a good idea though, i’ll try that when I start to see how it works.

Thanks!

4

That issue has been covered recently here, with some brilliant solutions by Pauo O’Brien: