Display the product image as radio buttons or checkboxes, with a tick mark appearing when selected

Question

Display the product image as radio buttons or checkboxes, with a tick mark appearing when selected

I am trying to add a background image to the <img> tag. My goal is to display the checkmark image in the center of the Twitter image. However, the checkmark image as a background image is not appearing here.

img{
  background-image:url(https://www.colourbox.com/preview/2692824-green-check-mark-symbol-over-white-background.jpg);
  background-repeat:no-repeat;
  background-size:20%;
  background-position:center center;
}

<img src="https://hakin9.org/wp-content/uploads/2014/02/twitter-150x150.png"  />

html css image

Answer 1

Answer №1

If you are looking to create a custom checkbox, be sure to follow these guidelines:

Include at least one checkbox and one label
Place the checkbox before the label
Set the checkbox to have display:none
The label should have for={Id of checkbox}
If the label immediately follows the checkbox, the checked style should be written like: ex. chx:checked + label {...
If the label and checkbox are not directly next to each other, use: ex. chx:checked ~ label {...
These are the most common layouts, but there are other possibilities as well.

Demo

.chx {
  display: none
}

.label {
  display: block;
  background-image: url(https://hakin9.org/wp-content/uploads/2014/02/twitter-150x150.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
}

img {
  display: none
}

.chx:checked+.label img {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 50%;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
}

<input id='chx' class='chx' type='checkbox'>


<label class='label' for='chx'><img src='https://www.colourbox.com/preview/2692824-green-check-mark-symbol-over-white-background.jpg' width='50'></label>

Answer 2

If you are looking to create a custom checkbox, be sure to follow these guidelines:

Include at least one checkbox and one label
Place the checkbox before the label
Set the checkbox to have display:none
The label should have for={Id of checkbox}
If the label immediately follows the checkbox, the checked style should be written like: ex. chx:checked + label {...
If the label and checkbox are not directly next to each other, use: ex. chx:checked ~ label {...
These are the most common layouts, but there are other possibilities as well.

Demo

.chx {
  display: none
}

.label {
  display: block;
  background-image: url(https://hakin9.org/wp-content/uploads/2014/02/twitter-150x150.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
}

img {
  display: none
}

.chx:checked+.label img {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 50%;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
}

<input id='chx' class='chx' type='checkbox'>


<label class='label' for='chx'><img src='https://www.colourbox.com/preview/2692824-green-check-mark-symbol-over-white-background.jpg' width='50'></label>

Answer 3

Answer №2

The focal point of the Twitter graphic you've selected is a bright white shade.

A background pattern will only be visible in sections of the image that are see-through.

To make those pixels transparent, you'll have to modify the image using an editing tool.

Answer 4

The focal point of the Twitter graphic you've selected is a bright white shade.

A background pattern will only be visible in sections of the image that are see-through.

To make those pixels transparent, you'll have to modify the image using an editing tool.

Answer 5

Answer №3

Your issue stems from the fact that the twitter logo's white background is obscuring the tick behind it.

Using just one img element makes it impossible to place the background-image on top of the content. To overcome this, you will need to introduce an additional element like a div, as shown below:

I have reduced the size of the tick to ensure the twitter icon remains visible

.test {
  display: inline-block;
  position: relative;
}

.test:after {
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center center;
  background-image: url('https://www.colourbox.com/preview/2692824-green-check-mark-symbol-over-white-background.jpg');
}

<div class="test">
  <img src="https://hakin9.org/wp-content/uploads/2014/02/twitter-150x150.png" />
</div>

Answer 6

Your issue stems from the fact that the twitter logo's white background is obscuring the tick behind it.

Using just one img element makes it impossible to place the background-image on top of the content. To overcome this, you will need to introduce an additional element like a div, as shown below:

I have reduced the size of the tick to ensure the twitter icon remains visible

.test {
  display: inline-block;
  position: relative;
}

.test:after {
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center center;
  background-image: url('https://www.colourbox.com/preview/2692824-green-check-mark-symbol-over-white-background.jpg');
}

<div class="test">
  <img src="https://hakin9.org/wp-content/uploads/2014/02/twitter-150x150.png" />
</div>

Display the product image as radio buttons or checkboxes, with a tick mark appearing when selected

Answer №1

Demo

Answer №2

Answer №3

Similar questions

How come the Google fonts won't display correctly within my HTML document?

Create a division element with an image that can be dragged around

Modify the navbar background color in bootstrap-vuejs

Mystery factor triggering the appearance of scrollbar as the window is resized to a specific width threshold

Exploring the tab-content features of Bootsrap 5 through anchor tags

Determine the specific table entry that was clicked on

The font implemented in Bootstrap does not appear to be adapting well to different

Display the menu upon activating the hover event icon using only CSS

Is there a way to adjust the size of a video thumbnail to fit within a

Unraveling a collection of HTML tags using Python's Beautiful Soup library

To create a distinctive design, the HTML5 wrapper will specifically enclose the Header element

confirm that the form is necessary and contains text

Discovering the initial element with a data attribute above zero using JQuery

Mini-navigation bar scrolling

When the button/link is clicked, I must dynamically create a modal popup that includes a user control

Matching stroke-dashoffset in SVG between two distinct paths

Challenging glitch in the JavaScript code

Tips for maintaining the footer at the bottom of the page regardless of the screen size

"Varying hues on various displays: Exploring RGB values and CSS for video color

Which Web Browsers Support Canvas and HTML5?