html - tag - Imagen de fondo receptiva con partículas js
src html (2)
Estoy usando el código de floowing:
archivo application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Rubiksolutions</title>
<%= stylesheet_link_tag ''application'', media: ''all'', ''data-turbolinks-track'' => true %>
<%= javascript_include_tag ''application'', ''data-turbolinks-track'' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div>
<nav>
<div class="cube"></div>
<div id="nav_wrapper">
<ul>
<li><%=image_tag("name.jpg", :size => "150x40")%></li>
<li><a>Inicio</a></li>
<li class="submenu"><a>Productos</a>
<ul class="drop-menu menu-1">
<li>una</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
<li>cinco</li>
<li>seis</li>
</ul>
</li>
<li class="submenu"><a>Servicios</a>
<ul class="drop-menu menu-2">
<li>una</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
<li>cinco</li>
<li>seis</li>
</ul>
</li>
<li class="submenu"><a>Educación</a>
<ul class="drop-menu menu-3">
<li>una</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
<li>cinco</li>
<li>seis</li>
</ul>
</li>
<li><a>Contáctanos</a></li>
</ul>
</div>
<div class="container" id="btn-menu" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="logo-image">
<%=image_tag("name.jpg", :size => "150x40")%>
</div>
</nav>
</div>
<%= yield %>
</body>
</html>
Este es mi archivo home.html.erb:
<section>
<div id="particles-js"></div>
</section>
<div class="bender" id="bender2">
<div class="head">
<div class="antenna">
<div class="antenna-circle"></div>
<div class="antenna-triangle"></div>
<div class="antenna-base"></div>
</div>
<div class="eyes">
<div class="curve--left"></div>
<div class="curve--right"></div>
<div class="eyes-subcontainer">
<div class="eye eye--left">
<div class="pupil"></div>
</div>
<div class="eye eye--right">
<div class="pupil"></div>
</div>
</div>
</div>
<div class="mouth">
<ul class="tooth--vertical">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="tooth--horizontal tooth-horizontal1"></span>
<span class="tooth--horizontal tooth--horizontal2"></span>
</div>
</div>
</div>
Aquí está mi archivo main.Js:
$(document).ready(function(){
console.log("Loading particles.js");
particlesJS(''particles-js'',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"onresize": {
"enable": true,
"density_auto": true,
"density_area": 400 // nb_particles = particles.nb * (canvas width * canvas height / 1000) / density_area
}
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
});
var state= false;
$(function(){
$(".cube")
.cube({size:{width:50,height:50}})
.execute("x (R'' U R'') D2 (R U'' R'') D2 (R U R'') D2 (R U'' R'') D2 (R U R'') D2 (R U'' R'') D2 R2 x''");
});
function myFunction(x) {
x.classList.toggle("change");
if (!state){
$("#nav_wrapper").css(''transform'', ''translateX(0%)'');
state = true;
}
else{
$("#nav_wrapper").css(''transform'', ''translateX(-150%)'');
state = false;
}
};
Esto es parte de mi archivo CSS:
* {
margin: 0;
padding: 0;
}
#particles-js {
display:block;
vertical-align:bottom;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
opacity:1;
-webkit-transition:opacity .8s ease,-webkit-transform 1.4s ease;
transition:opacity .8s ease, transform 1.4s ease;
width:100%;
height:100%;
top:0;
left:0;
background-image: image-url("rub.jpg");
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:cover;
}
nav {
position:fixed;
left:50%;top:0;
z-index: 9999;
margin-top: 25px;
margin-left:-40%; /* negative margin equal to half the width */
width:80%;
height:60px;
background:#hhh;
opacity: 0.7;
filter: alpha(opacity=70);
border-radius: 5px;
}
Como pueden ver, no estoy configurando el cuerpo del cuerpo pero cuando traté de hacerlo obtuve el mismo resultado.
Que en mi opinión es demasiado pequeño en altura. Utilicé la imagen de fondo: cubrir porque es lo que se recomienda para que la imagen de fondo responda pero no encaja bien.
Mi pregunta es si depende del tamaño original de la imagen o si estoy haciendo algo mal? y si hay alguna forma específica de hacer que el fondo realmente responda? En otras palabras, ¿para que el fondo de la imagen se ajuste al alto y ancho máximo de la pantalla de los diferentes dispositivos móviles?
Creo que su problema es la forma en que usa la altura. Ha establecido la altura de # particles-js en 100% ... pero ¿100% de qué? Prueba agregar:
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}
Luego agrega esto:
background-image: image-url("rub.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
Usted tiene algunos errores en su CSS, así que quizás empiece por arreglarlos.
Línea 19
background-image: image-url("rub.jpg");
a
background-image: url("rub.jpgf");
Línea 25
background-position:cover;
sintaxis en valores correctos no válidos para la posición son opciones como derecha arriba, o 50% 50%
La línea 36 tiene un color no válido
background:#hhh;