CSS text background color trouble

  • My site uses a content slider for the home page, and I am trying to add transparent background colour to the text only (so that it wraps around the text itself, and doesn’t create a block of colour like it does now).

    HTML

    <center><img src="/wp-content/uploads/2013/07/skid.png"  class="bigImage" data-animate="rollIn"></img></center>
<div class="text_1_1" data-ease-type="fadeInUp">3D Conceptual Design</div>
<div class="text_1_2" data-ease-type="fadeInUp"><p style="line-height: 125%;">Electrolysis cell with integrated gas separator</div></p>

    CSS

    .section_slider_1 .text_1_1 {width:290px; margin-left:-435px; position:absolute; left:50%; top:124px; font-family:'Open Sans', Arial, Helvetica, sans-serif; font-size:20px; color:#0071b3; background-color:rgba(255,255,255,0.7); text-transform:uppercase;}

.section_slider_1 .text_1_2 {width:290px; margin-left:-435px; position:absolute; left:50%; top:149px; font-family:'Open Sans', Arial, Helvetica, sans-serif; font-size:22px; color:#ffffff; background-color:rgba(0,113,179,0.6); font-weight:bold; text-transform:uppercase;}

    How it looks now (image)

    Suggestions?

Viewing 1 replies (of 1 total)

  • Use <span> which is inline element, not block element.

    <div>
	<span>A block of text with many many lines that has Yellow background.</span>
</div>

<p>
	<span>A block of text with many many lines that has Red background.</span>
</p>

    and assign the background color to the <span>

    div span { background-color: yellow; }
p span { background-color: red; }

Viewing 1 replies (of 1 total)
  • The topic ‘CSS text background color trouble’ is closed to new replies.

Tags