I'm trying to make a theme where there is only a background image for the whole page with most text displayed directly on the image (meaning, no background colors for most divs). Since the text is white and the image is black and white I'd like to have a black background for almost all text (with the exception of site name, primary menu, etc) to make sure text is always legible.

After some searching, I've found some people solve this through applying background-color to the p(aragrpah) element. This works, but the background color extends all the way to the right instead of ending where the text ends. To solve that, you can add display:inline. The problem with that is that instead of new lines for paragraph breaks, you get the next paragraph right next to the previous one with just a break in the background color signifying the new paragraph.

What I want is for it to look like this: http://s3.amazonaws.com/sitevista/af041b7a-223b-46ca-a865-e96234fca13c45...
Unfortunately, that design no longer appears on that site so I can't peek at how they did it (or maybe they gave up on it, haha).

It seems like such a simple thing, but I've had a lot of trouble getting this to work. Is it really just not easily doable or am I missing something? And if this is something better suited to the forums, just let me know and I'll stop cluttering up your issue queue!

Comments

jmbarlow’s picture

jmbarlow commented

Something like this perhaps?

.body  {
   	background-image: url(../images/something.png);
	background-repeat: no-repeat;
	background-position: center;       
}

Or if by "whole page" you mean the content area, change the selector from .body to .main-wrapper and another block of declarations for .header-wrapper

stephthegeek’s picture

stephthegeek commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.