What I want is for the green background to be just behind the text, not to be 100% of the page width. Here is my current code:
h1 { _x000D_
text-align: center; _x000D_
background-color: green; _x000D_
}
_x000D_
<h1>The Last Will and Testament of Eric Jones</h1>
_x000D_
Try this one:
h1 {
text-align: center;
background-color: green;
visibility: hidden;
}
h1:after {
content:'The Last Will and Testament of Eric Jones';
visibility: visible;
display: block;
position: absolute;
background-color: inherit;
padding: 5px;
top: 10px;
left: calc(30% - 5px);
}
Please note that calc is not compatible to all browsers :) Just want to be consistent with the alignment in the original post.
<h1 style="display:inline-block;text-align: center;background : red;">The Last Will and Testament of Eric Jones</h1>
_x000D_
<p>lorem ibsum....</p>
with styles :
p{
background-color: #eee;
display: inline;
}
the background sets to the whole size of the element; revise the diffrence between inline elements and block elements from here
can use html5 mark tag within paragraph and heading tag.
<p>lorem ipsum <mark>Highlighted Text</mark> dolor sit.</p>
_x000D_
You have to mention the width of the h1 tag..
your css will be like this
h1 {
text-align: center;
background-color: green;
width: 600px;
}
As the other answers note, you can add a background-color
to a <span>
around your text to get this to work.
In the case where you have line-height
though, you will see gaps. To fix this you can add a box-shadow
with a little bit of grow to your span. You will also want box-decoration-break: clone;
for FireFox to render it properly.
EDIT: If you're getting issues in IE11 with the box-shadow, try adding an outline: 1px solid [color];
as well for IE only.
Here's what it looks like in action:
.container {_x000D_
margin: 0 auto;_x000D_
width: 400px;_x000D_
padding: 10px;_x000D_
border: 1px solid black;_x000D_
}_x000D_
_x000D_
h2 {_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
font-family: Verdana, sans-serif;_x000D_
text-transform: uppercase;_x000D_
line-height: 1.5;_x000D_
text-align: center;_x000D_
font-size: 40px;_x000D_
}_x000D_
_x000D_
h2 > span {_x000D_
background-color: #D32;_x000D_
color: #FFF;_x000D_
box-shadow: -10px 0px 0 7px #D32,_x000D_
10px 0px 0 7px #D32,_x000D_
0 0 0 7px #D32;_x000D_
box-decoration-break: clone;_x000D_
}
_x000D_
<div class="container">_x000D_
<h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>_x000D_
</div>
_x000D_
A little late to game but thought I would add my 2 cents...
To avoid adding the extra mark-up of an inner span you could change the <h1>
display property from block
to inline
(catch is you would have ensure the elements after the <h1>
are block elements.
HTML
<h1>
The Last Will and Testament of
Eric Jones</h1>
<p>Some other text</p>
CSS
h1{
display:inline;
background-color:green;
color:#fff;
}
Result
JSFIDDLE
http://jsfiddle.net/J7VBV/
A very simple trick to do so, is to add a <span>
tag and add background color to that. It will look just the way you want it.
<h1>
<span>The Last Will and Testament of Eric Jones</span>
</h1>
And CSS
h1 { text-align: center; }
h1 span { background-color: green; }
<span>
tag in an inline element tag, so it will only span over the content faking the effect.
The main consideration that others are neglecting is that OP has stated that they cannot modify the HTML.
You can target what you need in the DOM then add classes dynamically with javascript. Then style as you need.
In an example that I made, I targeted all <p>
elements with jQuery and wrapped it with a div with a class of "colored"
$( "p" ).wrap( "<div class='colored'></div>" );
Then in my CSS i targeted the <p>
and gave it the background color and changed to display: inline
.colored p {
display: inline;
background: green;
}
By setting the display to inline you lose some of the styling that it would normally inherit. So make sure that you target the most specific element and style the container to fit the rest of your design. This is just meant as a working starting point. Use carefully. Working demo on CodePen
HTML
<h1>
<span>
inline text<br>
background padding<br>
with box-shadow
</span>
</h1>
Css
h1{
font-size: 50px;
padding: 13px; //Padding on the sides so as not to stick.
span {
background: #111; // background color
color: #fff;
line-height: 1.3; //The height of indents between lines.
box-shadow: 13px 0 0 #111, -13px 0 0 #111; // Indents for each line on the sides.
}
}
display: table;
h1 {_x000D_
display: table; /* keep the background color wrapped tight */_x000D_
margin: 0px auto 0px auto; /* keep the table centered */_x000D_
padding:5px;font-size:20px;background-color:green;color:#ffffff;_x000D_
}
_x000D_
<h1>The Last Will and Testament of Eric Jones</h1>
_x000D_
fiddle
http://jsfiddle.net/J7VBV/293/
more
display: table
tells the element to behave as a normal HTML table would.
More about it at w3schools, CSS Tricks and here
display: inline-flex;
text-align: center;
on parent.container {_x000D_
text-align: center; /* center the child */_x000D_
}_x000D_
h1 {_x000D_
display: inline-flex; /* keep the background color wrapped tight */_x000D_
padding:5px;font-size:20px;background-color:green;color:#ffffff;_x000D_
}
_x000D_
<div class="container">_x000D_
<h1>The Last Will and Testament of Eric Jones</h1>_x000D_
</div>
_x000D_
display: flex;
.container {_x000D_
display: flex;_x000D_
justify-content: center; /* center the child */_x000D_
}_x000D_
h1 {_x000D_
display: flex;_x000D_
/* margin: 0 auto; or use auto left/right margin instead of justify-content center */_x000D_
padding:5px;font-size:20px;background-color:green;color:#ffffff;_x000D_
}
_x000D_
<div class="container">_x000D_
<h1>The Last Will and Testament of Eric Jones</h1>_x000D_
</div>
_x000D_
about
Probably the most popular guide to Flexbox and one I reference constantly is at CSS Tricks
display: block;
.container {_x000D_
display: flex;_x000D_
justify-content: center; /* centers child */_x000D_
}_x000D_
h1 {_x000D_
display: block;_x000D_
padding:5px;font-size:20px;background-color:green;color:#ffffff;_x000D_
}
_x000D_
<div class="container">_x000D_
<h1>The Last Will and Testament of Eric Jones</h1>_x000D_
</div>
_x000D_
::before
h1 {_x000D_
display: flex; /* set a flex box */_x000D_
justify-content: center; /* so you can center the content like this */_x000D_
}_x000D_
_x000D_
h1::before {_x000D_
content:'The Last Will and Testament of Eric Jones'; /* the content */_x000D_
padding: 5px;font-size: 20px;background-color: green;color: #ffffff;_x000D_
}
_x000D_
<h1></h1>
_x000D_
fiddle
http://jsfiddle.net/J7VBV/457/
about
More about css pseudo elements ::before and ::after at CSS Tricks and pseudo elements in general at w3schools
display: inline-block;
centering with position: absolute
and translateX
requires a position: relative
parent
.container {_x000D_
position: relative; /* required for absolute positioned child */_x000D_
}_x000D_
h1 {_x000D_
display: inline-block; /* keeps container wrapped tight to content */_x000D_
position: absolute; /* to absolutely position element */_x000D_
top: 0;_x000D_
left: 50%; /* part1 of centering with translateX/Y */_x000D_
transform: translateX(-50%); /* part2 of centering with translateX/Y */_x000D_
white-space: nowrap; /* text lines will collapse without this */_x000D_
padding:5px;font-size:20px;background-color:green;color:#ffffff;_x000D_
}
_x000D_
<h1>The Last Will and Testament of Eric Jones</h1>
_x000D_
about
More on centering with transform: translate();
(and centering in general) in this CSS tricks article
text-shadow:
and box-shadow:
h1, h2, h3, h4, h5 {display: table;margin: 10px auto;padding: 5px;font-size: 20px;color: #ffffff;overflow:hidden;}_x000D_
h1 {_x000D_
text-shadow: 0 0 5px green,0 0 5px green,_x000D_
0 0 5px green,0 0 5px green,_x000D_
0 0 5px green,0 0 5px green,_x000D_
0 0 5px green,0 0 5px green;_x000D_
}_x000D_
h2 {_x000D_
text-shadow: -5px -5px 5px green,-5px 5px 5px green,_x000D_
5px -5px 5px green,5px 5px 5px green;_x000D_
}_x000D_
h3 {_x000D_
color: hsla(0, 0%, 100%, 0.8);_x000D_
text-shadow: 0 0 10px hsla(120, 100%, 25%, 0.5),_x000D_
0 0 10px hsla(120, 100%, 25%, 0.5),_x000D_
0 0 10px hsla(120, 100%, 25%, 0.5),_x000D_
0 0 5px hsla(120, 100%, 25%, 1),_x000D_
0 0 5px hsla(120, 100%, 25%, 1),_x000D_
0 0 5px hsla(120, 100%, 25%, 1);_x000D_
}_x000D_
h4 { /* overflow:hidden is the key to this one */_x000D_
text-shadow: 0px 0px 35px green,0px 0px 35px green,_x000D_
0px 0px 35px green,0px 0px 35px green;_x000D_
}_x000D_
h5 { /* set the spread value to something larger than you'll need to use as I don't believe percentage values are accepted */_x000D_
box-shadow: inset 0px 0px 0px 1000px green;_x000D_
}
_x000D_
<h1>The First Will and Testament of Eric Jones</h1>_x000D_
<h2>The 2nd Will and Testament of Eric Jones</h2>_x000D_
<h3>The 3rd Will and Testament of Eric Jones</h3>_x000D_
<h4>The Last Will and Testament of Eric Jones</h4>_x000D_
<h5>The Last Box and Shadow of Eric Jones</h5>
_x000D_
fiddle
https://jsfiddle.net/Hastig/t8L9Ly8o/
There are a few other ways to go about this by combining the different display options and centering methods above.
HTML
<h1 class="green-background"> Whatever text you want. </h1>
CSS
.green-background {
text-align: center;
padding: 5px; /*Optional (Padding is just for a better style.)*/
background-color: green;
}
h1 is a block level element. You will need to use something like span instead as it is an inline level element (ie: it does not span the whole row).
In your case, I would suggest the following:
style.css
.highlight
{
background-color: green;
}
html
<span class="highlight">only the text will be highlighted</span>
Try removing the text-alignment center and center the <h1>
or <div>
the text resides in.
h1 {
background-color:green;
margin: 0 auto;
width: 200px;
}
You can use the HTML5 <mark>
tag.
HTML:
<h1><mark>The Last Will and Testament of Eric Jones</mark></h1>
CSS:
mark
{
background-color: green;
}
Source: Stackoverflow.com