WordPress.org

Ready to get started?Download WordPress

Forums

CSS text background color trouble (2 posts)

  1. KasperN
    Member
    Posted 8 months ago #

    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?

  2. paulwpxp
    Font hero
    Posted 8 months ago #

    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; }

Reply

You must log in to post.

About this Topic

Tags