CODEWITHSUNDEEP
css
Willem Oostendorp
Willem Oostendorp

Reputation: 120

Position a (background-)image aside the content of a website using CSS

I'm building a website looking like a newspaper on a table. I'd like to put an image coffee cup to the right of the newspaper, thus creating the illusion that the background is a table and not some weird wood texture. The coffee cup cannot create a horizontal scrollbar, since it's not actually important content. I've tried using absolute positioning a div next to my main container (which is centered), but this creates a horizontal scrollbar. I've also tried to give the body tag the coffee image as background and positioning that to the top right, but then my newspapers goes on top of it and it just looks weird.

Is there any way to realize this using CSS? If not, I'm prepared to use JS (jQuery), but that's obviously not my first choise.

Upvotes: 0

Views: 610

Answers (2)

Willem Oostendorp
Willem Oostendorp

Reputation: 120

I found a solution with help from Mild Fuzz: I made a div with 100% width and height, and made the width of the background image containing the coffee cup twice the width of the cup (400px) + the width of the newspaper + a little margin so the cup doesn't touch the newspaper. The entire image is transparent except the cup. I set this image as background image of the newly created div and centered it. This way it's always at the same position relative to the newspaper. Since it's a PNG image, making it huge (1900px) isn't an issue.

Upvotes: 0

Mild Fuzz
Mild Fuzz

Reputation: 30803

I would just cut the image of the coffee cup up, so you only have what you need. This would also reduce the size of the image, so better for load speeds.

failing that, use the overflow: hidden on the parent container

Upvotes: 1

Related Questions