CSS Background Image Before and After H1 Tag

css background image before and after h1 tag

You can use the :before and :after css selectors.

h1:before {    background-color: green;    padding: 0 20px;    content: " ";}h1:after {    background-color: red;    padding: 0 20px;    content: " ";}

<h1>Test</h1>

Responsive image before and after h1 tag

You just needed to fix the widths of the before and after elements. They were 100% so were taking up the full width of the title.

I also dropped the font-size. You'll have to take care of that with media queries if you want it to grow on larger screens etc.

body {  height: 100%;  margin: 0;  background-repeat: no-repeat;  background-attachment: fixed;  background: #000;}
h1{  display: block;}
h1.heading {  position: relative;  color: #fff;  font-family: sans-serif;  font-size: 1.5rem;  font-weight: 700;  line-height: 87px;  letter-spacing: .02rem;  text-align: center;  text-transform: uppercase;  width: 100%;  margin: 0;  margin-top: 30px;  padding: 0;}
h1.heading:before {  display: inline-block;  margin: 0 20px 8px 0;  content: " ";  text-shadow: none;  background: url(https://i.imgur.com/fcoggcZ.png) no-repeat right center;  width: 30%;  height: 87px;  position: absolute;  left: 0;}h1.heading:after {  display: inline-block;  margin: 0;  content: " ";  text-shadow: none;  background: url(https://i.imgur.com/KCzu3hE.png) no-repeat left center;  width: 30%;  height: 87px;  position: absolute;  right: 0;}

<h1 class="heading"><i class="logo"></i>Welcome World</h1>

Background image for H1 heading

I use this technique a lot:

h1{
    background: url('http://i49.tinypic.com/2zs1z79.png') 0 0 repeat-x;
    position:relative;
    display: inline-block;
    margin:0 25px;
    padding:0 10px;
    height:40px;
}

h1:before,h1:after {
    content:'';
    display: inline-block;
    position:absolute;
    top: 0;
    right: -20px;
    width: 20px;
    height: 100%;
    background:inherit;
    background-position:100% 100%;
}
h1:before {
    left:-20px;
    background-position: 0 100%;
}

I use :before and :after for the head and the tail and a sprite for the image. It is nice, clean and flexible (enough).

demo : http://jsfiddle.net/pavloschris/5Qvn7/

h1-tag with an background-image underline with fixed width

Create the background image with the width of 420px.

Then use the following css

    h1 {
      background:url('https://images.squarespace-cdn.com/content/v1/5834a5fd9de4bb511a531745/1572560269010-YEGGAHEJ1O3AG5OAMO7M/ke17ZwdGBToddI8pDm48kEnLsHrnzeww6Ind1smsg7N7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UZMvWVOiG2zXPfa_FplZumXplNQ97KbZI2EjeHIoBACLnr1xKjsq_-rO8kOgOtwYvw/Burning-Up-BG.jpg?format=2500w') no-repeat left bottom;
      min-width:420px;
    }

<h1>Text here</h1>

How to position heading (h1) placed on a background image and centered according to it outside of its container

Please check the fiddle - https://jsfiddle.net/afelixj/mq3n7we4/3/

Used @media (min-width: 481px) to position the h1 above the image.

---

Related Topics