How to move a background image to the right side (when there is already another background image)?

user_18680879 0
Viewed 225

I tried to get a background image on the right side of the header, but when I use: background-position: right; or float: right; then it doesn't do anything and I'm not sure if it's possible to style one background image specifically in css when they are both in the same class.

(the image on the left is good as it is, just an example to show that it has multiple backgrounds)

https://jsfiddle.net/qeysvr6c/82/

/* Using example images, since I don't know how to add patterns into jsfiddle without having to download them */

.h1_content {
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg) no-repeat;  /* pattern for the header, left magnifying glass */ 
  background-size: 4%;
  background-color: #00a8f3;
  color: white;
}

.h1_content::after {
  content: "";
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
  background-position: right;  /* Doesn't go right? */
  background-repeat: no-repeat;
  position: absolute;
  background-size: cover;
  width: 50px;
  height: 50px;
}
<article class="text_bottom">
        <section class="section_test">
          <h1 class="h1_content">Topic here</h1>
          <p>Random text here</p>
        </section>
        </article>

css html
2 Answers

Add position:relative to the heading and right:0 to the :after psuedo-element. Since the :after is position:absolute it will dock to the position relative parent.

There's other ways you could do this with one element, by using multiple background images for example. But this should do the trick.

/* Using example images, since I don't know how to add patterns into jsfiddle without having to download them */

.h1_content {
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg) no-repeat;  /* pattern for the header, left magnifying glass */ 
  background-size: 4%;
  background-color: #00a8f3;
  color: white;
  position: relative;
}

.h1_content::after {
  content: "";
  background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
  background-position: right;  /* Doesn't go right? */
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  background-size: cover;
  width: 50px;
  height: 50px;
}
<article class="text_bottom">
        <section class="section_test">
          <h1 class="h1_content">Topic here</h1>
          <p>Random text here</p>
        </section>
        </article>

user_25109390

the ::after pesudo element doesnt have the enough width to go to the right so if you give it the space it will be pushed to the right and background-size should be 50px or contain to maintain its ratio :

.h1_content::after {
    content: "";
    background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
    background-repeat: no-repeat;
    background-position: right;
    position: absolute;
    background-size: contain;
    width: 85%;
    height: 50px;
  }

or simply just give the parent element position relative and the child should have right:0 :

.h1_content::after {
    content: "";
    background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
    background-repeat: no-repeat;
    background-position: right;
    position: absolute;
    right: 0;
    background-size: cover;
    width: 50px;
    height: 50px;
  }
user_185877790
Related