CODEWITHSUNDEEP
csstextbackground-image
TJ1
TJ1

Reputation: 8468

CSS: adding an image to a circle with text

I would like to add an image to a circle that is created by CSS and has text inside. I know how to create a circle with text, for example, this StackOverflow question and answer shows how to do it. Here is the circle definition in css:

circle {
    background: #f00;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 100px;
    margin-right:5px;
}

and here is what I will have in html:

<circle>THIS IS THE TEXT</circle>

Now I want to be able to add a background image to the circle and if possible add an opacity of 0.5. So basically I want an image with a shape of circle and text on top of it. Here is an example:

enter image description here

The "THIS IS THE TEXT" is the text that can be written in the html code on top of the image.

How can this be done?

Upvotes: 0

Views: 3682

Answers (2)

user9306633
user9306633

Reputation: 66

if you want an alternate solution here is what i use 

.story_shape {
    width: 15rem; 
    height: 15rem; 
    -webkit-shape-outside: circle(50% at 50% 50%);
    shape-outside: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%); 
    position: relative; 
}

 .story_img {
    height: 100%;
    transform: translateX(-4rem);  
    backface-visibility: hidden; 
 }
 
 .story_caption {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: white; 
    text-transform: uppercase; 
    font-size: 1.7rem; 
    text-align: center;  
    backface-visibility: hidden; 
 }
 <figure class="story_shape">
    <img src="https://orig00.deviantart.net/6afd/f/2015/182/4/f/croatia_nature_pack___sample__1___proref_org_by_proref-d8zgqmh.jpg" alt="person on a tour" class="story_img">
    <figcaption class="story_caption">mary smith</figcaption>
</figure>

Upvotes: 2

Dejan.S
Dejan.S

Reputation: 19118

It's not hard to find how to do a circle with text. The <circle> is used for SVG, so it's not what you want here. Use a plain <div> instead. The solution here gives the background image a opacity.

body {
  background-color: #121212;
}

.circle {
  position: relative;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.circle:hover:after {
  opacity: 0.5;
}

.circle:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(https://buyersguide.caranddriver.com/media/assets/submodel/280_8204.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 1;
  transition: opacity 300ms;
}

.circle__text {
  padding: 10px;
  background-color: yellow;
}
<div class="circle">
  <span class="circle__text">random text</span>
</div>

Upvotes: 3

Related Questions