问题
I am using the floowing code:
application.html.erb file:
<!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>
This is my home.html.erb file:
<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>
Here is my main.Js file:
$(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;
}
};
This is part of my CSS file:
* {
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;
}
As you can see I am not shaping the body css but when I tried to do it I get the same result.
Which in my opinion is too small in height. I used the image background-size: cover because it is what is recommended to make the background image responsive but it does not fit well.
My question is if it depends on the original size of the image or I am doing something wrong? and if there is any specific way to make the background really responsive? In other words to make the image background fit the maximum height and width of the screen of the the different mobile devices?
回答1:
I think your issue is the way you are using height. You have set the height of #particles-js to 100%... but 100% of what? Try adding:
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}
Then add this:
background-image: image-url("rub.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
回答2:
You have a few errors in your CSS, so maybe start by fixing them.
Line 19
background-image: image-url("rub.jpg");
to
background-image: url("rub.jpgf");
Line 25
background-position:cover;
syntax in invalid, correct values for the position are options like right top, or 50% 50%
Line 36 has an invalid color
background:#hhh;
来源：https://stackoverflow.com/questions/41621559/responsive-background-image-with-particle-js