CODEWITHSUNDEEP
css
Meta
Meta

Reputation: 1860

Style HR with Image

I am trying to achieve something as close to the image below as possible. enter image description here

I currently get the following with the code below and can't seem to quite get it to do what I need.

Current Styling: enter image description here

My CSS:

hr:after { 
    background: url('../img/green_leaf.png') no-repeat top center;
    content: "";
    display: block;
    height: 18px; /* height of the ornament */
    position: relative;
    top: -9px; /* half the height of the ornament */
    border: 0;
    color: #d7d7d7;
}

I Would like to thicken the line, and if possible, add space around the image (without making the green_leaf.png have a white bg).

Upvotes: 3

Views: 11710

Answers (3)

Frank Egan
Frank Egan

Reputation: 146

If you set it up like this, and specify background color on the image to match whatever you have in the background of the page (probably white) it will look good:

HTML

<div class='hr'>
    <hr>
    <img src='../img/green_leaf.png' alt=''>
</div>

CSS

hr {
    border:none;
    border: 1px solid #d7d7d7;
}

.hr { 
    text-align: center;
}

.hr img {
    position: relative;
    top: -18px;
    background:white;
    padding:0 5px;
}

Result: enter image description here

Fiddle

Upvotes: 0

misabelcarde
misabelcarde

Reputation: 83

You can find the answer in this post Custom <hr> with image/character in the center

I modified it and I got this:

hr {
  no-repeat top center;
  text-align: center; /* horizontal centering */
  line-height: 1px; /* vertical centering */
  height: 1px; /* gap between the lines */
  border-width: 1px 0; /* top and bottom borders */
  border-style: solid;
  border-color: #676767;
}

hr:after {
  content: ""; /* section sign */
  background: url('smiley.gif') no-repeat top center;
  display: inline; /* for vertical centering and background knockout */
  background-color: white; /* same as background color */
  padding: 0 2em; /* size of background color knockout */
}

Pay attention to padding: 0 2em; and background-color: white;.

Upvotes: 0

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60567

How about setting the image in the hr element, and using :before and :after to create the lines? That way you won't have to set a background on the image to cover up a single line.

Working Example:

hr { 
    background: url('https://i.sstatic.net/37Aip.png') no-repeat top center;
    background-size: contain;
    display: block;
    height: 18px;
    border: 0;
    position: relative;
}
hr:before,
hr:after {
    content: '';
    display: block;
    position: absolute;
    background: #d7d7d7;
    height: 2px;
    top: 8px;
}
hr:before {
    left: 0;
    right: 50%;
    margin-right: 10px;
}
hr:after {
    right: 0;
    left: 50%;
    margin-left: 10px;
}
<hr />

Upvotes: 18

Related Questions