Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

248
Visualizações
Set Fonts Color from Average color of Body Background Image

Trying to set a CSS variable (font color of specific elements) using the average of the body background image.

Part 1 - getting the average color value of an image

Found this and looks like it does what I need: https://stackoverflow.com/a/28228205/19049081

However this calls in the img element with an ID. Even if I set an ID on the Body, it's not pulling in the actual background image url.

Part 2 - Inserting the value into the variable at the root level

It looks like it's right, but I can be sure. Used this code here: https://stackoverflow.com/a/37802204

Here my full code:

jQuery( document ).ready( function(){
var rgb = getAverageRGB(document.getElementById('colors'));
document.documentElement.style.setProperty('--bb-primary-color', 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')');

function getAverageRGB(imgEl) {

var blockSize = 5, // only visit every 5 pixels
    defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs
    canvas = document.createElement('canvas'),
    context = canvas.getContext && canvas.getContext('2d'),
    data, width, height,
    i = -4,
    length,
    rgb = {r:0,g:0,b:0},
    count = 0;
    
if (!context) {
    return defaultRGB;
}

height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;

context.drawImage(imgEl, 0, 0);

try {
    data = context.getImageData(0, 0, width, height);
} catch(e) {
    /* security error, img on diff domain */alert('x');
    return defaultRGB;
}

length = data.data.length;

while ( (i += blockSize * 4) < length ) {
    ++count;
    rgb.r += data.data[i];
    rgb.g += data.data[i+1];
    rgb.b += data.data[i+2];
}

// ~~ used to floor values
rgb.r = ~~(rgb.r/count);
rgb.g = ~~(rgb.g/count);
rgb.b = ~~(rgb.b/count);

return rgb;

}
});             

And the website: https://symbiosisearth.network

The end goal is the get elements using the variable --bb-primary-color (and other variables) to be the average of the background image because the image is randomly generated.

I don't understand JS completely, just self taught HTML & CSS - putting it together as I go.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda