Display rectangular background instead of circular background

Question

We want to add a Circular background for an image like this: http://jsfiddle.net/rkEMR/8679/

So I followed link1 , I am trying below code in the link2, but its displaying like below image, background is not circluar:

.product-options ul.options-list .label>label.colors 
{  
width: 30px; 
height: 30px; 
border-radius: 50%; 
background-size: cover !important; 
display: block; 
padding: 0 !important; 
font-size: 0; 
border: 0px solid #d1d1d1 !important;
}

Edit

script

var jQuery = $.noConflict(); 
jQuery(document).ready(function(){ 
var inner = Array(); 
inner = jQuery(" .product-options ul.options-list .label>label"); 
for (i=0;i<inner.length;i++){ 
var classN = inner[i].innerText; 
if (classN=="Black" || classN=="Green" || classN=="Red" || classN=="Purple" || classN=="Orange" || classN=="Pink" || classN=="Brown"){ 
inner.eq(i).addClass("colors"); 
classN = classN.toLowerCase(); 
var urlB = "http://stylebaby.com/media/catalog/custom/"+classN+".png"; 
inner.eq(i).css('background-image', 'url(' + urlB + ')'); 
} 
} 
});

So you're giving the image to the same element of span which is not correct. — Yonas Hailu, Jan 23 '17 at 13:02
@Justinas we are using javascript for class as `inner = jQuery(" .product-options ul.options-list .label>label");` i will try fiddle..... — , Jan 23 '17 at 13:03
@YonasHailu sorry for that, please help me what will fix the issue.... — , Jan 23 '17 at 13:04

nashcheez · Accepted Answer · 2017-01-23T13:09:42.663

0

Provide a fixed height and width to the <span class="label" here. Preferably give them the same value for the element to be a square.

Apply margin-top to the label element for it to be positioned in the center of the span

Refer to attached code:

.label {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

.label label {
    margin-top: 3px !important;
}

The result should be like in the attached screenshot:

edited Jan 23 '17 at 13:09

answered Jan 23 '17 at 13:06

nashcheez

5,067
1
27
53

updated your code, can you please check [link](http://sbdev2.kidsdial.com:81/yang-yin.html) , can you please help me to move the image bit down..... – Jan 23 '17 at 13:07
The `margin-top` value is getting overriden. Increase specificity and apply `!important`. Update with this: `.label label { margin-top: 3px !important; }` – nashcheez Jan 23 '17 at 13:10
also for image, by default `white background displaying` , only orange background should display only after we `mouse-click` on image.... – Jan 23 '17 at 13:11
can you please chcek : http://prnt.sc/dz8sqt you can see `white background is displaying once we open site, but we want to remove that `white-background` , once we click on image , its displaying `orange` background, thats is fine – Jan 23 '17 at 13:15
You missed a `;` in your code for `.label` in between `height` & `width`. For the `label` element increase specificity because your code is getting overriden. `.product-options ul.options-list .label>label.colors: margin-top: 3px !important;` – nashcheez Jan 23 '17 at 13:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133808/discussion-between-user5348fh8y5-and-nashcheez). – Jan 23 '17 at 13:24

score 0 · Answer 2 · answered Jan 23 '17 at 13:15

You need to first set CSS for external rectangle background element like this (Do not forget to add unique class name for this elements like "circular-bg-clr" to avoid conflict with other elements):

.product-options ul.options-list .label.circular-bg-clr { 
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

After that for inner "color" label you can change your CSS something like this:

.product-options ul.options-list .label.circular-bg-clr > label.colors {
    margin: 9px auto !important;
    width: 30px;
    height: 30px
}

Display rectangular background instead of circular background

2 Answers2