Мое фоновое изображение не работает

Фоновое изображение класса .content не работает. PS: Подождите 10 секунд, чтобы прелоадер исчез.Мое фоновое изображение не работает

Как папка установки:
enter image description here

#loader-wrapper { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1000; 
 
} 
 

 
#loader { 
 
    -webkit-animation: rotateplane 1.2s infinite ease-in-out; 
 
    animation: rotateplane 1.2s infinite ease-in-out; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #00c4ff; 
 
    position: absolute; 
 
    z-index: 1001; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -50px; 
 
    margin-top: -50px; 
 
} 
 

 
@-webkit-keyframes rotateplane { 
 
    0% { -webkit-transform: perspective(120px) } 
 
    50% { -webkit-transform: perspective(120px) rotateY(180deg) } 
 
    100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } 
 
} 
 

 
@keyframes rotateplane { 
 
    0% { 
 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg); 
 
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
 
    } 50% { 
 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 
 
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
 
    } 100% { 
 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 
 
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 
 
    } 
 
} 
 

 
#loader-wrapper .loader-section { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    z-index: 1000; 
 
    background: #1c262b; /* Old browsers */ 
 
    background: -moz-linear-gradient(top, #1c262b 0%, #3c4b57 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1c262b), color-stop(100%,#3c4b57)); 
 
    background: -webkit-linear-gradient(top, #1c262b 0%,#3c4b57 100%); 
 
    background: -o-linear-gradient(top, #1c262b 0%,#3c4b57 100%); 
 
    background: -ms-linear-gradient(top, #1c262b 0%,#3c4b57 100%); 
 
    background: linear-gradient(to bottom, #1c262b 0%,#3c4b57 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c262b', endColorstr='#3c4b57',GradientType=0); /* IE6-9 */ 
 
} 
 

 
#loader-wrapper .loader-section.section-left { 
 
    left: 0; 
 
} 
 
    
 
#loader-wrapper .loader-section.section-right { 
 
    right: 0; 
 
} 
 

 
.loaded #loader-wrapper .loader-section.section-left { 
 
    -webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ 
 
    -ms-transform: translateX(-100%); /* IE 9 */ 
 
    transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */ 
 
} 
 
    
 
.loaded #loader-wrapper .loader-section.section-right { 
 
    -webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */ 
 
    -ms-transform: translateX(100%); /* IE 9 */ 
 
    transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */ 
 
} 
 

 
.loaded #loader { 
 
    opacity: 0; 
 
} 
 

 
.loaded #loader-wrapper { 
 
    visibility: hidden; 
 
} 
 

 
.loaded #loader { 
 
    opacity: 0; 
 
    -webkit-transition: all 0.3s ease-out; 
 
      transition: all 0.3s ease-out; 
 
} 
 

 
.loaded #loader-wrapper .loader-section.section-right, 
 
.loaded #loader-wrapper .loader-section.section-left { 
 
    
 
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
 
       transition: all 0.3s 0.3s ease-out; 
 
} 
 

 
.loaded #loader-wrapper { 
 
     -webkit-transform: translateY(-100%); 
 
      -ms-transform: translateY(-100%); 
 
       transform: translateY(-100%); 
 
    
 
     -webkit-transition: all 0.3s 1s ease-out; 
 
       transition: all 0.3s 1s ease-out; 
 
} 
 
.content { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(noisy-texture-100x100-o5-d20-c-333333-t0.png); 
 
    color: #000000; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <link href="css/main.css" rel="stylesheet" type="text/css"> 
 
     <script> 
 
      var startTime = Date.now(); 
 
      window.addEventListener("load", function(){ 
 
       var load_screen = document.getElementById("load_screen"); 
 
       setTimeout(function() { 
 
        document.getElementsByTagName("BODY")[0].setAttribute("class", "loaded"); 
 
       }, Math.max(0, 10000 - (Date.now() - startTime))); 
 
      }); 
 
     </script> 
 
    </head> 
 
    <body> 
 
     <div id="loader-wrapper"> 
 
      <div class="loader-section section-left"></div> 
 
      <div class="loader-section section-right"></div> 
 
      <div id="loadingbar-frame"></div> 
 
      <div id="loader"></div> 
 
     </div> 
 
     <div class="content">&nbsp;</div> 
 
    </body> 
 
</html>

источник

2015-03-24 HellixS

О, и я использовал этот сайт: http://www.noisetexturegenerator.com/ – HellixS

Вы проверили консоль на наличие ошибок ? – mikedidthis

Ваш путь неправильно. Ваш файл css не находится в той же папке, что и ваш образ, поэтому вы не можете использовать background-image: url(noisy-texture-100x100-o5-d20-c-333333-t0.png);. Вместо этого:

background-image: url("../noisy-texture-100x100-o5-d20-c-333333-t0.png");

Это будет расти в 1 папку. Свойство url() рассчитывается относительно вашего файла .css, а не вашего файла .html.

источник

2015-03-24 15:26:06

Put ../ перед URL пути

background-image: url(noisy-texture-100x100-o5-d20-c-333333-t0.png);.

Таким образом, он должен выглядеть

background-image: url('../noisy-texture-100x100-o5-d20-c-333333-t0.png');

источник

2015-03-24 15:26:21 dowomenfart

background-image: url("../noisy-texture-100x100-o5-d20-c-333333-t0.png");

Попробуйте как этот

Edit: Как уже упоминалось ваш путь был не прав. после url( вы забыли «../ и в конце») (вы забыли цитату)

источник

2015-03-24 15:27:21

Мое фоновое изображение не работает

ответ

Смежные вопросы