CSS Background Color Extend as Far as Text

css background color extend as far as text?

h1 is a block element, so , it will use all the available area. so change this element to inline, for only use its width

h1 {
  display: inline;
  background-color: white;
}

http://jsfiddle.net/wxNQR/

How do I set a background-color for the width of text, not the width of the entire element, using CSS?

Put the text in an inline element, such as a <span>.

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

And then apply the background color on the inline element.

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

An inline element is as big as its contents is, so that should do it for you.

Extend background-color of header beyond container with css

You can use the :before pseudo element with absolute positioning and negative z-index to extend the background color of a contained div the entire way to the edge of the page.

#container {    width: 100px;    margin: 0 auto;    background-color: #FFFFCC;}.stripe {    background-color:#CCFFFF;    height: 100px;    position: relative;}.stripe:before {    content:"";    background-color:#CCFFFF;    position: absolute;    height: 100%;    width: 4000px;    left: -2000px;    z-index: -1;}

<div id="container">  <div>one</div>  <div class="stripe">two</div>  <div>three</div></div>

Extend background color of wrapped span when line-height is set and spacing appears between lines

Set padding on the highlight span to increase its background area.

$('#line-height-input').change(function(e) {  $('.text').css('line-height', e.target.value + '%');  // new:  var padding = ((e.target.value-100)/200); if (padding<0) padding = 0;  $('.highlight').css('padding-top', padding + 'em');  $('.highlight').css('padding-bottom', padding + 'em');})

.wrapper {  width:600px;   margin: auto;  left: 0;  right: 0;}
.input-area {  padding-top: 20px;}
.text {  font-size:25px;  line-height: 200%;}
.highlight {  background-color: lightgreen;  padding:.5em 0; /* initial, for a 2em lineheight */}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">  <span class="text">    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <span class="highlight">incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute</span> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  </span>  <div class="input-area">    <div>Enter line-height in percent</div>    <input id="line-height-input" type="number" value=200>%  <div></div>

How to display text background color beyond text?

See below, as I change height:, the background also changes:

div.text {
position: relative;
background-color: #DFDFDF;
opacity: 0.8;
padding-top: 8px;
padding-right: 52px;
padding-bottom: 8px;
padding-left: 12px;
font-family: arial;
text-align: justify;
font-size: 0.9em;
height: 150px; <--- work with this 656px seems perfect.
background-size: 100%;
}

CSS extending background color to the right hand side of the page

Yet another possible styling:

<code style="display:block; white-space:pre; width:100%; background-color: #FFFFD9;">
some block
of code
</code>

The background color isn't stretching the entire width of screen

Wrapping your container with the section will most likely fix the problem.

Instead of writing this;

<section class="about container py-5 my-5 mx-auto">

try this:

<section class="about py-5 my-5">
  <div class="container mx-auto">

You probably have a margin set around your container

Also your about styles should be set to width: 100%

Expanding the background color rectangle of selected text

I think the MDN is wrong or not updated, because if we refer to the specification:

The highlight pseudo-elements can only be styled by a limited set of properties that do not affect layout. The following properties apply to the highlight pseudo-elements:

• color
• background-color
• cursor
• caret-color
• text-decoration and its associated properties
• text-shadow
• stroke-color, fill-color, and stroke-width

The outline isn't listed which explain why it's not working. Also I don't think you can control the hightlighting area. As explained in the same specification:

For text, the corresponding overlay must cover at least the entire em box and may extend further above/below the em box to the line box edges. Spacing between two characters may also be part of the overlay area, in which case it belongs to the innermost element that contains both characters and is selected when both characters are selected.

We already have the em box which is trivial and your best luck is to have more in case the line box is higher but it will not behave the same cross browser.

Here is a basic example where I use a pseudo element with a big font-size to increase the height of the line-box and I align it in the middle. In this case the selection will cover more than the text but of course this will also affect the layout which is probably not needed and will not work with all the browser.

The below example works on Chrome and doesn't on Fiferfox

p:after {
  content: "";
  font-size: 30px;
  vertical-align: middle;
}

p::selection {
  background-color: red;
}

<p>My cool text, select me!</p>

How to change the background color of TEXT in css

You can use display:table-cell

table-cell: Let the element behave like a <td> element - W3Schools

Also, unless you want to go back to the dark ages, this is well-supported

#div1 {  background: red;  color: white;  display: table-cell;}

<div id="div1">This is a sentence.</div>Lorem ipsum dolor sit amet, pri cu quod audiam molestie, sit an modo probo conceptam, vim nemore quodsi no. Postea possit ne pro. Ne mel mollis oportere laboramus. Eu dico eius omnes ius. Id vis nibh adipiscing, maiorum suscipit ius eu. Sonet viris antiopamnec in, est id equidem omnesque cotidieque, tritani detraxit qui cu.

---

Related Topics