Here's part of a design I made:



Notice how the blue background of the paragraph is jagged at on the right edges.

I thought I'd be able to acheive this using something like:

p {
    display:inline;
}

Aswell as setting the background and other styles etc. But unfortunately it doesn't work! I tried floating it too but no luck.

Is it possible to do this with CSS? I was sure I'd managed it one point in the past.

Its almost impossible to do in css, unless you split each line into individual p.
And / or use many hacks.

here is a huge article on topic, but sorry its in russian:
http://chikuyonok.ru/2010/01/uniform-text-background/

without testing;

each line of text would have to be in a separate inline element to give the "jagged" effect.
And the background colour applied to the text holder element.

I wonder if there is a way to do a bit of DOM "jiggery pokery" to handle that? Could be a interesting time waster experiment.

I think this article will help you: http://css-tricks.com/text-blocks-over-image/

Great thanks for the help

Bit of javascript "jiggery pokery" and there you go

http://www.modtalk.co.uk/_site/code/...ed-background/

function wordHighlight(parent) {
	e = document.getElementById(parent);
	var words = e.innerHTML.split(" ");
	
	var outstr = "";
	for (x=0;x<words.length; x++) {
		outstr = outstr + '<span>' + words[x] + ' </span>';
	}
	document.getElementById(parent).innerHTML = outstr;
	
}

CSS code

#pholder {
	width:50%;
	border:1px solid grey;
	margin:0 auto;
}
#pholder span {
	background-color:blue;
	color:#ffffff;
	opacity:0.5;
	filter:alpha(opacity=50)
}

Thanks for the tip.

Gene