If you have a background image that covers the entire body of an HTML page, and you have the body split up into several divs (Think like a grid) is it possible to tell what the color is behind the center point of the div?
In this image the blue grid represents 'divs'. the Dots represent the center point of the div and color I want to find out about.
i found a solution with the help of 2 answers (this, and this).
i created 2 divs:
1 - to use the cover image.
2 - a container for the grid.
the image-div lays in front of the grid-container. when you click on the image, it will save the coordinates of the clicked point and change the z-index of the image-div to be at the back.
than simulate a click on the document (the grid container is in front now) using the same coordinates, to get the css property.
finally switch the z-index of the image-div to be displayed in the front again.
please run the following code in full window or see it in the provided fiddle.
var posX, posY;
$("#cover").click(function(e){
//get cursor coordinates
posX = e.pageX;
posY = e.pageY;
//push cover image to the back of the view
$(this).css("z-index",-1);
//simulate click with same coordinates on grid-container
document.elementFromPoint(posX, posY).click();
//switch cover image back to the front of the view
$(this).css("z-index",2);
});
//get bgColor and use it
$(".grid-item").click(function(){
var bgColor = $(this).css("background-color");
//use bgColor as you like
$("#result").css("background-color",bgColor);
})#cover, .grid-container {
width: 100%;
height: 80%;
position: absolute;
top: 0;
}
#cover {
z-index: 2;
background-image: url('https://www.gstatic.com/webp/gallery/4.sm.jpg');
background-size: 100% 100%;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
.grid-item {
padding: 20px;
font-size: 40px;
text-align: center;
}
#grid-item-1 { background-color: #00061e; }
#grid-item-2 { background-color: #394266; }
#grid-item-3 { background-color: #61a7d3; }
#grid-item-4 { background-color: #db2f1c; }
#grid-item-5 { background-color: #8b8f91; }
#grid-item-6 { background-color: #ce171d; }
#grid-item-7 { background-color: #92ed5a; }
#grid-item-8 { background-color: #db25db; }
#grid-item-9 { background-color: #fcf00b; }
span {
position:absolute;
top:85%;
}
#result {
width:50px;
height:50px;
left:200px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div id="cover"></div>
<div class="grid-container">
<div class="grid-item" id="grid-item-1">1</div>
<div class="grid-item" id="grid-item-2">2</div>
<div class="grid-item" id="grid-item-3">3</div>
<div class="grid-item" id="grid-item-4">4</div>
<div class="grid-item" id="grid-item-5">5</div>
<div class="grid-item" id="grid-item-6">6</div>
<div class="grid-item" id="grid-item-7">7</div>
<div class="grid-item" id="grid-item-8">8</div>
<div class="grid-item" id="grid-item-9">9</div>
</div>
</div>
<span>background-color result:</span>
<span id="result"></span>
As i understand you first need to find out the coordinate of the center of each child div, see: How to find the element's x center coordinates and related window offset after that you need the color of background image of parent div in that position, see : Get pixelcolor of CSS Background Image
