Empty span with background image : span « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. span

Empty span with background image

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title></title>
<style type="text/css">

body {
  margin: 10%;
}

h1 {
  width: 216px;
  height: 72px;
  position: relative: 
}

h1 span {
  background: url(http://www.java2s.com/style/logo.png) no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;

}
</style>

    </head>
    <body>

<h1><span></span>Replacement Text Is Here</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p>


    </body>
</html>








Related examples in the same category

1.'span' Example
2.span line-height: 0.6em;
3.span display: none;
4.span float: right;
5.span inside a h2
6.Using span to highlight one letter
7.Using span to create author part of a quotation
8.Using span to highlight
9.Span inside a DIV
10.Span padding: 0 57px;
11.Span color: #786B50;
12.Span display: block;
13.Span float: left;
14.Span letter-spacing: 6px;
15.Span width: 1000px;
16.Span position: absolute;
17.Span top: 206px;
18.Span left: 86px;
19.Span color: #140A00
20.Let DIV span two columns
21.span with class selector
22.span padding: 0 10px;
23.span background: mistyrose;
24.span float left
25.span border: 1px solid rgb(200, 200, 200);
26.span background: rgb(244, 244, 244);
27.span background: white;
28.span border: 1px solid black;
29.Using span to create quotation
30.span.color {color:#FF0000;}
31.Capital first letter with span
32.Style a letter with span
33.Inline style for Span
34.The span element can be used to group inline elements only.
35.span with id style
36.Inline Spacer
37.Inline Decoration solid
38.Inline Decoration by border
39.Inline Decoration with image
40.span in a h2 with absolute position
41.SPAN in anchor
42.Span in a H2
43.Shrinkwrapped SPAN by setting both width and height to auto
44.Horizontally Stretched Absolute SPAN
45.Line break with margin top
46.Default line space with margin 0
47.One and half Line break with margin-top: 1.5em
48.Invisible inline horizontal rule: a line-break.
49.Double-border inline horizontal rule.
50.Background inline horizontal rule with image
51.Combination Inline horizontal rule.
52.Use SPAN to style Blocked area
53.Absolute centered