cssにbackground-imageをbody内に設定したのですが反映されません。
特にnav id="fh5co-main-nav"に背景画像が反映されないのが全く分からず、画像が入っているimagesの場所も指定はできています。
ご教授お願いいたします。
HTML
1<!DOCTYPE html> 2<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 3<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 4<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> 5<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 6 <head> 7 <meta charset="utf-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <title>Minimal — 100% Free Fully Responsive HTML5 Template by FREEHTML5.co</title> 10 <meta name="viewport" content="width=device-width, initial-scale=1"> 11 <meta name="description" content="Free HTML5 Template by FREEHTML5.CO" /> 12 <meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" /> 13 <meta name="author" content="FREEHTML5.CO" /> 14 15 <!-- 16 ////////////////////////////////////////////////////// 17 18 FREE HTML5 TEMPLATE 19 DESIGNED & DEVELOPED by FREEHTML5.CO 20 21 Website: http://freehtml5.co/ 22 Email: info@freehtml5.co 23 Twitter: http://twitter.com/fh5co 24 Facebook: https://www.facebook.com/fh5co 25 26 ////////////////////////////////////////////////////// 27 --> 28 29 <!-- Facebook and Twitter integration --> 30 <meta property="og:title" content=""/> 31 <meta property="og:image" content=""/> 32 <meta property="og:url" content=""/> 33 <meta property="og:site_name" content=""/> 34 <meta property="og:description" content=""/> 35 <meta name="twitter:title" content="" /> 36 <meta name="twitter:image" content="" /> 37 <meta name="twitter:url" content="" /> 38 <meta name="twitter:card" content="" /> 39 40 <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 41 <link rel="shortcut icon" href="favicon.ico"> 42 43 <link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet"> 44 <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet"> 45 46 <!-- Animate.css --> 47 <link rel="stylesheet" href="css/animate.css"> 48 <!-- Icomoon Icon Fonts--> 49 <link rel="stylesheet" href="css/icomoon.css"> 50 <!-- Bootstrap --> 51 <link rel="stylesheet" href="css/bootstrap.css"> 52 53 <!-- Flexslider --> 54 <link rel="stylesheet" href="css/flexslider.css"> 55 56 <link rel="stylesheet" href="css/style.css"> 57 58 59 <!-- Modernizr JS --> 60 <script src="js/modernizr-2.6.2.min.js"></script> 61 <!-- FOR IE9 below --> 62 <!--[if lt IE 9]> 63 <script src="js/respond.min.js"></script> 64 <![endif]--> 65 66 </head> 67 <body> 68 69 <nav id="fh5co-main-nav" role="navigation"> 70 <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle active"><i></i></a> 71 <div class="js-fullheight fh5co-table"> 72 <div class="fh5co-table-cell js-fullheight"> 73 <ul> 74 <li><a href="index.html">Home</a></li> 75 <li><a href="work.html">Profile</a></li> 76 <li><a href="product.html">News</a></li> 77 <li><a href="about.html">Shop</a></li> 78 <li><a href="contact.html">Contact</a></li> 79 </ul> 80 <p class="fh5co-social-icon"> 81 <a href="#"><i class="icon-twitter2"></i></a> 82 <a href="#"><i class="icon-user"></i></a> 83 <a href="#"><i class="icon-youtube"></i></a> 84 </p> 85 </div> 86 </div> 87 </nav> 88 89 <div id="fh5co-page"> 90 <header> 91 <div class="container"> 92 <div class="fh5co-navbar-brand"> 93 <h1 class="text-left"><a class="fh5co-logo" href="index.html">PIONEA</a></h1> 94 <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a> 95 </div> 96 </div> 97 </header> 98 99 <aside id="fh5co-hero" class="js-fullheight"> 100 <div class="flexslider js-fullheight"> 101 <ul class="slides"> 102 <li style="background-image: url(images/plini.jpg);"> 103 <div class="overlay-gradient"></div> 104 <div class="container"> 105 <div class="col-md-8 col-md-offset-2 col-md-push-4 js-fullheight slider-text"> 106 <div class="slider-text-inner"> 107 <h2>Create A Motivational Template</h2> 108 <span>Branding</span> 109 </div> 110 </div> 111 </div> 112 </li> 113 <li style="background-image: url(images/plini.jpg);"> 114 <div class="overlay-gradient"></div> 115 <div class="container"> 116 <div class="col-md-8 col-md-offset-2 col-md-push-4 js-fullheight slider-text"> 117 <div class="slider-text-inner"> 118 <h2>Start Practicing Your Course</h2> 119 <span>Website</span> 120 </div> 121 </div> 122 </div> 123 </li> 124 <li style="background-image: url(images/plini.jpg);"> 125 <div class="overlay-gradient"></div> 126 <div class="container"> 127 <div class="col-md-8 col-md-offset-2 col-md-push-4 js-fullheight slider-text"> 128 <div class="slider-text-inner"> 129 <h2>Start Practicing Your Course</h2> 130 <span>Products</span> 131 </div> 132 </div> 133 </div> 134 </li> 135 </ul> 136 </div> 137 </aside> 138 139 <footer> 140 <div id="footer"> 141 <div class="container"> 142 143 144 <div class="row copy-right"> 145 <div class="col-md-6 col-md-offset-3 text-center"> 146 <p class="fh5co-social-icon"> 147 <a href="#"><i class="icon-twitter2"></i></a> 148 <a href="#"><i class="icon-user"></i></a> 149 <a href="#"><i class="icon-youtube"></i></a> 150 </p> 151 152 <!--ここのspanは数字のアニメーションを設定--> 153 <p> 154 © <span class="fh5co-counter js-counter" data-from="0" data-to="2018" data-speed="5000" data-refresh-interval="50"> 155 </span> 156 @PIONEA_jpn 157 </p> 158 </div> 159 </div> 160 </div> 161 </div> 162 </footer> 163 164 </div> 165 166 <!-- jQuery --> 167 <script src="js/jquery.min.js"></script> 168 <!-- jQuery Easing --> 169 <script src="js/jquery.easing.1.3.js"></script> 170 <!-- Bootstrap --> 171 <script src="js/bootstrap.min.js"></script> 172 <!-- Waypoints --> 173 <script src="js/jquery.waypoints.min.js"></script> 174 <!-- Counters --> 175 <script src="js/jquery.countTo.js"></script> 176 <!-- Flexslider --> 177 <script src="js/jquery.flexslider-min.js"></script> 178 179 <!-- Main JS --> 180 <script src="js/main.js"></script> 181 182 </body> 183</html> 184
important指定を入れるとどうなりますか? 例:background-image: url(images/plini.jpg) !important;
うまくいきませんでした..また別のbodyタグに背景が指定されていたんで削除して試してみたのですがそれもうまくいきませんでした
bodyタグの背景の指定は今回当てたい箇所には影響ないはずです。例えばli全体に対して!important指定で設定があるとか、の場合は影響があります。やはり画像のパスが間違っているのではないでしょうか。相対パスで書かれているのようなので、ひとまずhttpから始まる絶対パスを入れてみて表示されたらパスが違うということなので、実行しているファイルからの相対パスを改めて設定しなおすと良いです。