Hi there,
I am trying to have a small image in the middle of two horizontal lines similar to this:
I currently have the following CSS:
.hr-line-primary:after {
content: '';
background-color: #6c3dd1;
display: block;
margin: 10px auto 30px;
width: 40px;
height: 5px; }
but I can’t work out how to have the little “bow” image in between. I also only have the “bow” as an image and not an icon.
Can anyone help me insert an image between the 2 lines?
Thank you.
Check this:
.hr-line-primary:before {
content: '';
background-color: #6c3dd1;
display: block;
width: 40px;
height: 5px;
}
.hr-line-primary:after {
content: '';
background-color: #6c3dd1;
display: block;
width: 40px;
height: 5px;
}
.hr-line-primary {
background: url('http://www.cutmypic.com/uploads/title600684207.png') no-repeat;
background-position: center;
display: flex;
justify-content: space-between;
width: 120px;
height: 20px;
align-items: center;
}
Thank you, that worked great!
I know you’re already sorted with a good method from @rpsm90 but thought I’d mention just for reference that you can do a similar thing with linear gradients which could allow for fluid width lines.
e.g.
Thanks 
I have tried PaulOB’s solution, but my image is appearing blurry. I have it pixel perfect, but it seems to be appearing blurry. Do you know why this would be? I’ve tried setting the background size to the exact size, but that doesn’t help.
Can we see the image (or a link to the page)?
It sounds as though you are stretching it somehow.
This is a fiddle:
The image looks blurry, but if you download and view it, it is much sharper and crisper.
Looks the same to me in Chrome.
I did a screenshot of the page and then downloaded the image and put them side by side.
You would probably be better off with a transparent png image and then you can use it on any background (or if you are able then draw it as an svg).
I see. I have noticed something odd - when I view the image at 80% in my browser, it appears as it should. Even though my browser is set to 100%, the image becomes blurred. I have created the image in Photoshop at 72dpi and when viewing it at 100%, it appears how it should.
Also, if I take a screen shot of my whole screen, then view it at 100%, it appears zoomed in 
If I view it at 80% in Photoshop, it appears as it should - sharp and crisp.
I know this is off topic, but does anyone know what this would be?
Thanks
Have you double checked that?
You may have clicked browser zoom by mistake and some browsers remember which pages you have viewed at different zooms so even though you have zoom at 100% sites that you have previously viewed at 120% will be 120% unless you reset.
Otherwise post a screenshot from your page showing what you see and that may give us a clue.
Back tomorrow as offline now.
Thanks for the reply.
I am definitely view at 100%.
This is a screenshot of Photoshop:
Does it appear blurred to you?
I meant a screenshot of the browser display at actual size and then I can compare to mine
If that’s an actual screenshot of the image (and you haven’t enlarged the image in your paint package) then the problem is 99% likely that you have your browser zoom setting for that page set to greater than 100%.
The image size in that screenshot is 29 x 25 but the image link you provided previously shows an image of 23 x 20. Indeed even the blue line in that screenshot is 6px tall but it is only specified as 5px tall in the css.
Either you have some transform applied to the image that you haven’t shown us or your browser’s zoom setting is incorrect (or you didn’t supply me with the real size image)
My screenshot of yourfiddle does not match the size of the screenshot you supplied. They should match exactly.
This is really odd. My browser is set to 100%:
https://ibb.co/JQN2NBL
This is my full CSS:
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,700,900|Roboto+Slab:300,400,700&display=swap');
body{
font-family: "Poppins";
font-size: 16px;
}
/* PADDING AND MARGINS
----------------------------- */
.pad-x-0 {
padding-left: 0 !important;
padding-right: 0 !important; }
.pad-y-0 {
padding-top: 0 !important;
padding-bottom: 0 !important; }
.mar-x-0 {
margin-left: 0 !important;
margin-right: 0 !important; }
.mar-y-0 {
margin-top: 0 !important;
margin-bottom: 0 !important; }
/* COLUMN FIXES
----------------------------- */
.col-centered {
float: none;
margin: 0 auto; }
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px; }
.col-xs-15 {
width: 20%;
float: left; }
@media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left; } }
@media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left; } }
@media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left; } }
/* TEXT ALIGN
----------------------------- */
.text-xs-left {
text-align: left; }
.text-xs-right {
text-align: right; }
.text-xs-center {
text-align: center; }
.text-xs-justify {
text-align: justify; }
@media (min-width: 768px) {
.text-sm-left {
text-align: left; }
.text-sm-right {
text-align: right; }
.text-sm-center {
text-align: center; }
.text-sm-justify {
text-align: justify; } }
@media (min-width: 992px) {
.text-md-left {
text-align: left; }
.text-md-right {
text-align: right; }
.text-md-center {
text-align: center; }
.text-md-justify {
text-align: justify; } }
@media (min-width: 1200px) {
.text-lg-left {
text-align: left; }
.text-lg-right {
text-align: right; }
.text-lg-center {
text-align: center; }
.text-lg-justify {
text-align: justify; } }
/* BUTTONS
----------------------------- */
.green-button{
background: #00bf8b;
color: #fff;
font-size: 18px;
font-weight: 300;
border-radius: 3px;
border: 2px solid #00bf8b;
padding: 10px 25px;
text-align: center;
transition: all ease 0.3s;
display: inline-block
}
.green-button:hover{
background: #fff;
color: #00bf8b;
border: 2px solid #00bf8b;
}
/* LINES
----------------------------- */
.hr-line:before {
content: '';
background-color: #6c3dd1;
display: block;
width: 40px;
height: 5px;
}
.hr-line:after {
content: '';
background-color: #6c3dd1;
display: block;
width: 40px;
height: 5px;
}
.hr-line {
background: url('../images/bow.gif') no-repeat;
background-position: center;
display: flex;
justify-content: space-between;
width: 120px;
height: 20px;
align-items: center;
margin: 0 auto
}
/* TOP BAR and NAVIGATION
----------------------------- */
.top-bar{
background: #6c3dd1;
padding: 30px 0 0 0;
}
.top-wrapper{
position: relative;
top: 45px;
margin-top: -75px;
}
.top-nav{
padding: 15px;
color: #fff;
display: flex;
align-items: center
}
.top-social{
margin-left: auto;
display: flex;
align-items: center
}
.top-social a{
line-height: 1px;
}
.top-social a i{
color: #fff;
margin-right: 10px;
font-size: 18px;
}
a.navbar-brand img{
max-width: 125px;
margin: 0;
padding: 0
}
.top-nav > .item{
margin-right: 40px;
display: flex;
align-items: center;
line-height: 16px;
font-size: 14px;
}
.top-nav > .item:last-of-type{
margin-right: 0
}
.top-nav > .item a{
color: #fff;
}
.top-nav > .item a:hover, .top-social a i:hover{
color: #d2bdff;
transition: all ease 0.3s;
}
.top-nav i{
margin-right: 10px;
font-size: 22px;
}
nav.navbar{
background: #fff!important;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 4px rgba(0,0,0,0.3);
padding: 10px 15px;
z-index: 10
}
nav.navbar ul.navbar-nav{
align-items: center
}
nav.navbar ul.navbar-nav li.nav-item a.nav-link{
color: #6c3dd1;
margin-right: 15px;
border-bottom: 2px solid #fff;
font-size: 16px;
}
nav.navbar ul.navbar-nav li.nav-item a.nav-link:hover{
border-bottom: 2px solid #00bf8b;
transition: all ease 0.3s
}
.dropdown-toggle::after {
display: none;
}
nav.navbar ul.navbar-nav li.nav-item a.nav-link i{
font-size: 12px;
}
nav.navbar ul.navbar-nav li.cta a.nav-link{
background: #00bf8b;
color: #fff;
display: flex;
align-items: center;
margin-right: 0;
padding: 10px;
border: 2px solid #00bf8b;
border-radius: 3px;
transition: all ease 0.3s
}
nav.navbar ul.navbar-nav li.cta a.nav-link:hover{
background: #fff;
border: 2px solid #00bf8b;
color: #00bf8b
}
nav.navbar ul.navbar-nav li.cta a.nav-link i{
font-size: 28px;
margin-right: 5px;
line-height: 10px;
}
.navbar-light .navbar-toggler{
background: #00bf8b;
border: 0;
padding: 15px 30px
}
.navbar-light .navbar-toggler span{
color: #fff;
font-size: 16px;
}
/* CAROUSEL
----------------------------- */
.carousel-control-next, .carousel-control-prev{
z-index: 100
}
.carousel-caption {
position: initial;
right: 0;
bottom: 20px;
left: 0;
z-index: 10;
position: relative;
top: 50%;
transform: translateY(-50%);
color: #fff;
text-align: center;
}
.carousel-item{
background: #ddd; height: 500px;
}
.slide-wrapping h3{
color: #6c3dd1;
font-size: 26px;
font-weight: 300;
display: block
}
.slide-wrapping h1{
color: #6c3dd1;
font-family: "Roboto Slab";
font-size: 60px;
font-weight: 300;
margin: 30px 0
}
.slide-wrapping h1 div.wow-container{
background: #00bf8b;
display: inline-block;
padding: 5px 10px;
border-bottom: 3px solid #fff;
}
.slide-wrapping h1 span.wow{
color: #fff;
text-transform: uppercase;
background: linear-gradient(to right, #fff 10%, #5cf4cb 50%, #fff 80%);
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
color: #fff;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip 1.5s linear infinite;
display: inline-block;
text-transform: uppercase;
font-weight: 700;
color: #fff;
}
@keyframes textclip {
to {
background-position: 200% center;
}
}
/* KEY POINTS
----------------------------- */
.key-features-container{
background: #f4f6f6;
}
.key-features{
display: flex;
align-items: center;
padding: 30px 0
}
.key-features > .item{
display: flex;
align-items: center;
margin-right: 20px;}
.key-features > .item i{
margin-right: 15px;
font-size: 42px;
color: #00bf8b;
line-height: 25px;
}
.key-features > .item span{
color: #666;
display: block;
font-size: 11px;
}
.key-features > .item > div span:first-of-type{
font-weight: 600;
}
/* HOMEPAGE
----------------------------- */
.main-content{
}
.main-content h1{
font-family: "Roboto Slab";
font-size: 60px;
font-weight: 300;
color: #6c3dd1;
margin: 60px 0
}
/* BREAKPOINTS
----------------------------- */
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
.top-nav{
justify-content: center
}
nav.navbar ul.navbar-nav li.cta a.nav-link i{
display: none
}
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.top-nav{
justify-content: center
}
nav.navbar ul.navbar-nav li.nav-item a.nav-link {
margin-bottom: 15px;
}
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.top-bar{
padding: 5px 0 0 0;
}
.top-nav{
display: none;
justify-content: center
}
nav.navbar{
margin-top: 40px
}
.key-features-container{
display: none
}
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
Yes that’s weird. If you measure the line in your screenshot its showing at 6px height but the css specifies it at 5px. The image is also bigger than your native image. Have you tried clearing cache in case something has got stuck there.
I assume yo have the correct image attribute sizes in the html etc.
I think the only way to resolve this is for us to see the actual page or a demo of the page where you get the enlarged image. Have you tried a standalone demo of just the line and bow outside of your application? If so then you can test if the same things happens.
Right, I found the issue! It was my default settings on my laptop. It had the display settings of the font size scale set to 125%!
So annoying, but its fixed now.
I hate being right all the time
Submitted only as an example code
for those who would wish to use the plethora of HTML entities available
rather than separate background images.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> HR decoration </title>
<!-- Modified from: https://www.sitepoint.com/community/t/image-in-the-middle-of-two-lines/336283/3 -->
<style>
.lcr {
width: 100%;
padding: 0.5em;
border: 0;
display: flex;
justify-content: space-between;
}
hr { width: 45%; height: 0.5em; background: orange; }
.ccup { font-size: 1.5em; }
.blue { background: blue; }
</style>
</head>
<body>
<div class="lcr">
<hr>
<div class="ccup"> ☕ </div>
<hr>
</div>
<p>Information between decorated <HR> tags</p>
<div class="lcr">
<hr class="blue">
<div class="ccup"> ☔ </div>
<hr class="blue">
</div>
</body>
</html>