Div con sfondo colorato di ampiezza pari al testo.

[fe3e]

Ciao a tutti, premetto che non sono assolutamente un esperto di Css, quindi vi ringrazio in anticipo per l'aiuto e la pazienza, ho trovato su un sito il seguente codice, che disegna una "nuvoletta" blu dietro un elemento div, il codice funziona ma la nuvola è larga tutto lo schermo, io invece vorrei che la sua larghezza fosse proporzionale al testo che inserisco nel div. Come posso fare?
ho provato ad inserire width:auto ma non cambia niente...
Se inserisco un valore specifico di px per il width , funziona ma la larghezza è fissa in quel caso, cioè non è ancora l'effetto che desidero.

position:relative;
 display:block;
 padding:15px;
 margin:1em 0 0em;
 color:color:Navy;
 background:#68b4e3;
 /* default background for browsers without gradient support */
 /* css3 */
 background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
 background:-moz-linear-gradient(#2e88c4, #075698);
 background:-o-linear-gradient(#2e88c4, #075698);
 background:linear-gradient(#2e88c4, #075698);
 -webkit-border-radius:10px;
 -moz-border-radius:10px;
 border-radius:10px;
 margin-left: 40px;
 background:#68b4e3;
 font-size:18;

[Lele80]

Hai provato con un valore di width in percentuale?

[Joisberg]

prova ad aggiungere

width:auto;
height:auto;

[MiWebDesign]

Preparati a sclerare: display:inline-block;