We Keep Coding

CSS - Image gets hidden in the overflowed area

I have created a segment from a circle but when I try to apply a background image to it, it applies it to the whole circle resulting in the image getting centered somewhere below what the user can't see.
Right now, only the portion of the circle that overlaps with the rectangle gets displayed thanks to overflow: hidden, I have just disabled the hidden for now to show how the image is actually getting rendered.
Can someone please tell me how I can apply a background image only to the portion of the circle that's visible?
This is the result I want:
Demo: https://codesandbox.io/s/segment-background-image-msu63
^ I achieved this by hardcoding the position of the image but I am looking for a CSS oriented approach because that'll be much more dynamic.
EDIT: so I was able to figure it out. The trick was to place another div on top of the semi-circle and add the image on that and set the overflow to hidden on the parent div. It works like a charm!
p.s the demo is updated with the solution.

The trick was to place another div on top of the semi-circle and add the image on that and set the overflow to hidden on the parent div. It works like a charm!
p.s the demo is updated with the solution.

You can adjust the background-position top top center:
background: url("./360.v1.png") top center no-repeat rgba(85, 112, 24, 0.76);

Selectively reveal background image

I am trying to create an interactive page where there's a ball. When I click on it, 2-3 random balls appear on the page. Each of those, when clicked, produce 2-3 of their own and the page slowly fills up with such balls. I have done this part using Jquery.
Now the page has a background image that is hidden from the user, and all he sees is 'white'. As and when a new ball appears, a circular region behind it (region being twice in size to that of ball) becomes transparent to reveal that portion of the background image, kind of like how the map is revealed in Age of Empires based on where the player goes.
How can I achieve this selective-revealing of background image based on the position of newly-created divs ? Can it even be done using just jquery/css and NO flash ?
My Jquery code for creating new balls looks like this :
$(document).on("click",".ball_link", function makeDiv(){
count=0;
//ajax code to fetch no. of divs to be created from table
while(count< no_of_divs)
{
//code to calculate random x,y coordinates and save them to posx and posy
var newdivid='div'+count;
$newdiv = $('<div/>').css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none',
'background':'ball.png'
}).appendTo( '.page-wrap' ).delay(900 * count).fadeIn(600).effect("bounce", { times:6, distance:15 },300);
count++;
}
});

You can use CSS background-clip, background-position and border-radius. Your newly created divs should be bigger than 'ball.png' with some border-radius so they appear as circles.
Then you can set the background position to be equal to negative div's position:
if div is on left: 100px; top: 40px then background-position should be: -100px -40px
Working sample here: http://jsfiddle.net/bndcS/
EDIT
Please see the fiddle here: http://jsfiddle.net/UX3B6/ The 'balls' appear with effect and delay.
Only one line of CSS had to be added :-)
EDIT 2
As for background and its negative coordinates: imagine that you have a big div with a nice image in the background. Now you create a small div on top of the big one. You set it in the top left corner (0,0) and set the background to the same image of the big div. Images match perfectly. Now you want to move your small div a little bit (lets say 20px right, 20 px down). Now the images do not match - in order to make things working again you need to move background image of the small div in the opposite direction you moved the div itself, hence negative coordinates: (20px left, 20px up = -20px)

You can use css3 transitions here is sample and tutorial it might useful
http://css3.bradshawenterprises.com/transitions/

onclick png background color change

I need to design a part of webpage like below the image. In the left side, there is color options. If the user pick any color from the left side and click on the image part, the part of the image should get filled by the picked color. I spent more time to google search. Most of the sites used flash only. But i do not know flash very well. Is it possible to achieve using jquery plugin?

You'll probably want to look into the <canvas> element. As for filling a particular bit of the image when clicked, you may want the floodfill algorithm.

Really this can be done simply, if you have strict control over what png files you use.
For example, you can make the png fully opaque with the exception of the area you want to colour.
Then you can load the image and just set the background colour of the element you are using when a colour is clicked.
Something like this:
$(".ColorOption").click(function(e){
e.preventDefault();
var color = $(this).data("color");
$("#MainImageBackground").css("background-color", color);
});
assuming you set up your colour options using the data attribute like so:
<a data-color="#F00"></a>
with your image something like:
<div id="MainImageBackground">
<img src="whatever"/>
</div>

You can solve this with Javascript, but therefore you need for every color a own image.
<script language="JavaScript" type="text/javascript">
function changePic(picColor)
{
if(picName == "btnRed")
{
document.getElementById(mainPic).src = "mainPicRed.jpg"
}
else if(picName == "btnYellow")
{
document.getElementById(mainPic).src = "mainPicYellow.jpg"
}
}
</script>
HTML for every color button:
<img src="red.jpg" name="btnRed" id="btnRed" onClick="changePic(this.name)">
<img src="mainPic.jpg" name="mainPic" id="mainPic">

Idea 1:
User the canvas element and look at fill methods, this is probably going to be more complex than flash.
Idea 2:
Create transparent PNG where the colourd area is the only part that is transparent.
Create 2 DIVS, 1 at z-index 10 and other at 20, same size, same position
Place image in top div which is z-index 20. Then change the colour of the background in div 1 which is at z-index 10.

To accept any png and fill the middle:
You can find information on the floodfill algorithm in javascript here:
http://jsfiddle.net/loktar/ZLw9m/
However your implementation will have to be more advanced as you need to convert the image to a format javascript understands (0's and 1's for example) and then run the algorithm on that
As #musefan pointed out if you can control the PNG's this is much easier

fadeIn background image on click

I have a working code that changes my document background image when links in my navbar are clicked. The background image changes instantly with no animation. How could I make the new background image fadeIn(); ?
js
$('.navigation a').click(function() {
currentBg = $(this).attr('href').replace('#', '') +'.jpg';
$('.background').css({'background-image':'url(images/skins/'+currentBg+')'});
});

I don't believe you can, the only way (that I know of) would be to have a block element (div for example) which has the background and that appears behind the rest of your content (positioned absolutely) and fade that in instead of switching backgrounds.

You cannot animate the background image changing its opacity.
May be you can have a image with required opacity at different sections and then animate the background position so that it gives a fadeIn behavior.
Take a look at this link it will help you.

There is no possiblity to fade the background image, you have to create a container and set its background image to let it fade in and fade out.

I've done something like this before by floating a foreground image on a separate div on top of the background image you'd like to 'fade' in and then creating a jquery fade-out effect on the foreground image.
You can use a similar trick to set solid text on a semi-transparent "background".
http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

I agree with int0x90.
What you can do is this:
Stack your images in a div, style position absolute, style of each image position absolute
set an id for the div
add a class active, with a z-index of 10
set all inactive images in div z-index to 0
you can use the z-index to pull the image with the highest z-index to the top of the stack
add class active to the on-click of nav bar link and remove this class from the previous on click so that the image's z-index is set back to 0 and not overridden.
in jquery, you may now be able to use opacity change and the speed of the change
hope this helps get you started!

As many others already said, it's impossible unless you use a block element as background.
But if you only want an animation, you could have a .gif as background then when it's animation has finished replace it with the real Image so the .gif doesn't iterate itself

making small icons visible on the right side of select background

When I add small icons to input as a background with style no-repeat right center they look great.
But If I try to do the same to select tag instead of input tag then I have a problem I cannot see icon probably because right side of select is covered with select triangle(drop down button). Is there any way to 'margin right' that background image ? using css or jquery or smth

You should be able to use px or % values to position the bg image more accurately, e.g.:
no-repeat 95% center
Also, you may need to increase the padding-right on the select