Image of outer space enclosed by a circular boundary

Check out this fiddle I created here.

It's a simple concept of an image inside a red circle. Is there a way to add some spacing around the image within the circle?

This is the markup I currently have:

<div style="
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
      background-size: cover;
      background-position: center;
      background-origin: padding-box;
      background-clip: padding-box;
      padding: 20px;
      border: 1px solid red;
    "></div>

Unfortunately, my current code doesn't achieve the desired effect of giving the image inside the circle a padding of 20px.

htmlcss

Answer №1

In order to ensure that the entire image fits inside a circle with padding of 20px all around, this code snippet cleverly uses the image as a background for the pseudo element before. This prevents the image from being clipped by the rounded corners of the div.

The size is set to "contain" to make sure the entire image is visible, especially since it is rectangular rather than square. After all, no one wants a headless chicken!

div::before {
  content: '';
  width: calc(100% - (2 * var(--padding)));
  height: calc(100% - (2 * var(--padding)));
  position: absolute;
  background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div style="
      width: 50px;
      height: 50px;
      border-radius: 50%;
      --padding: 20px;
      padding: var(--padding);
      border: 1px solid red;
      position: relative;
      background-color: #eeeeee;
    "></div>

It's important to note that the gray background in the demo serves to highlight the positioning and sizing of the image within the circle.

Answer №2

Make sure to utilize the content-box for clipping the image, not the padding-box

<div style="
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
      background-size: contain;
      background-position: center;
      background-origin: content-box;
      background-clip: content-box;
      background-repeat: no-repeat;
      padding: 20px;
      border: 1px solid red;
    "></div>

Answer №3

Does this meet your requirements? Give it a test run!

<div style="
      width: 75px;
      height: 75px;
      border-radius: 50%;
      background-image: url('https://www.example.com/image.jpg');
      background-size: cover;
      background-position: center;
      background-origin: padding-box;
      background-clip: content-box;
      padding: 30px;
      border: 2px solid blue;
    "></div>

background-clip:content-box;

Clip the image within content-box

If this doesn't align with your request, feel free to let me know for further adjustments.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The HTML5 range input is consistently defaulting to the minimum value and is not triggering the onChange event for text input

My goal is to implement a feature where an input type text is used along with an input type range with three specific use cases: 1. Default case: When the page loads, the slider should point to the value specified in the text input field. 2. When a user e ...

javascriptreactjshtmlrangeinput-type-range

Effortlessly adjust item width in CSS Grid

I am currently utilizing CSS Grid to showcase various tags. If a tag happens to be quite large, with a width exceeding 150px, I would ideally like that specific item to expand across multiple columns as necessary. For instance, in the visual representation ...

cssreactjscss-grid

"Incorporating date and time information into the database

I am attempting to set up an automatic SMS system that sends a reminder 24 hours before our residents' appointments. My challenge lies in extracting the date and time from the datetime row in my MySQL database. While I could create an input field, my ...

phphtmlmysqljscript

resizing videos in wordpress

Similar Question: How to Resize Embedded Videos Using PHP I am looking to adjust the dimensions of videos to be 280 pixels in height and 520 pixels in width on my WordPress homepage. Currently, the code is using the original YouTube dimensions: ...

phphtmlcsswordpressvideo

What is the best method to retrieve child elements from a class list object?

Seems like I have a similar content class <div class="parentclass"> <div class="childClass"> </div> <div class="childClass"> </div> <div class="childClass"> </d ...

javascripthtmlnode.jscss

Struggling to properly implement background images in a React application using Tailwind CSS

I'm currently developing a React application using Tailwind CSS for styling. In my project, I have an array of items called "trending," and I'm attempting to iterate through them to generate a series of divs with background images. However, I am ...

cssreactjstypescripttailwind-css

Using jQuery to add a class to an image element when the source attribute contains a specific

I have a bunch of text that looks like this <div id="justThisDIV"><p>Some paragraph <img src="http://mydomain.com/image.jpg"/> </p> <p><img src="http://mydomain.com/wow.png"/></p> <p><img src="http://notm ...

jquerycss

A comprehensive guide to navigating pages using AngularJS

Greetings! I've recently embarked on my Angular JS learning journey and have encountered an issue with loading content from pages. Unfortunately, I am not able to receive any content. Below are snippets of my index file and corresponding JavaScript co ...

javascriptangularjshtml

Dragging and dropping an HTML canvas element causes its width and height to be reset to zero

I am currently developing a customizable dashboard that allows users to rearrange dashboard tiles (represented by div elements) and position them anywhere within the dashboard. HTML Structure The HTML structure is outlined in the snippet below: <div cl ...

htmljquerycanvasdrag-and-dropchart.js

Tips for safeguarding against the insertion of scripts into input fields

Is there a method to stop users from inputting scripts into text fields or text areas? function filter($event) { var regex = /[^a-zA-Z0-9_]/; let match = regex.exec($event.target.value); console.log(match); if (match) { $event.pre ...

javascripthtmlvue.jsinputtextarea

Problem encountered while generating a torus shape using webGL

I am currently developing a program that aims to create 3D parametric shapes using webgl. The current code I have works successfully for rendering a sphere, but when I try switching the equations for a torus, only the upper half of the torus is being displ ...

javascripthtmlgraphicsopengl-eswebgl

When an HTML element extends beyond the screen's right boundary, it becomes truncated

My website utilizes a table to showcase some data, but there's an issue when viewed on smaller screens. The table gets cut off and not all the content is visible. Even after scrolling completely to the right, the rightmost field remains barely visible ...

htmlcssreactjsmaterial-designmaterial-ui

Repairing a CSS file for Internet Explorer versions 7, 8, and 9

Does anyone have experience with troubleshooting HTML5 CSS3 layouts across different browsers? I recently created a website layout from scratch that looks perfect in Firefox 5, Safari 5.1 and Chrome 12 on Mac. However, when using tools like Adobe BrowserL ...

internet-explorerhtmlcss

Is it acceptable to include a heading element within a label element?

Would it be acceptable to include other elements such as <h1> <h2> <b> within <label> elements, or is it preferable to use style instead? <label for="B"><b>like this</b></label> <label for=" ...

html

Having trouble getting smooth scrolling with easing to function properly

I'm facing an issue with a JQuery function that is supposed to enable smooth scrolling using JQuery easing, but for some reason, it's not functioning correctly and I'm unable to pinpoint the error. Here is the code for the function: $(func ...

javascriptjqueryhtmlcsseasing

Adjusting the size of h1 when hovering over an image

Can anyone help me figure out how to increase the width of my h1 tag when hovering over the image? I've been struggling to make it work. http://jsfiddle.net/xJ4dc/ Thank you in advance for any assistance. ...

csshoverwidthimage

When resizing, headers within Bootstrap text fail to adjust accordingly

I have created a card-like component in my HTML with text inside. My issue is that when I resize the page, the card shrinks but the text overflows. Currently, I am using Bootstrap 5 and its h4 class like this: <div class="card bg-white"> ...

htmlcssbootstrap-5

Having difficulty accessing the ::after element on Firefox when attempting to click

I've encountered an issue with my HTML and CSS code - it functions perfectly on Chrome, yet behaves differently on Firefox. button#groupToggle { background: 0 0; border: 1px solid #e6e6ed; color: #222; float: none; margin: 0 0 ...

javascripthtmlcss

Personalizing CSS classes in ASP.NET

In the project I'm currently developing, users will have the ability to customize the font color of header titles. These header titles are styled using values from a cssClass, which includes properties such as font-size, font-color, font-weight, and ...

asp.netcss

Adjust the parent div's background when hovering over it

Here is the code snippet I am working with: <div class="thumb_image_holder_orange"> <img src="http://dummyimage.com/114x64/000/fff.png" /> </div> I want to change the background of the div when hovering over the image, rather than j ...

jquerycss