class=coverで指定している背景写真がオフラインでは見えるのに、オンラインでは見えなくなってしまう現象に悩まされています。サーバはエックスサーバーを使っています。コードのせいでしょうか?
かれこれ2日間悩んでいるのですが自己解決できず...HTML、CSS、サーバにお詳しい方、お知恵を拝借したくお手数ですがどうぞよろしくお願いします。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<title>TARO TEST TEST 1</title> 5<meta charset="UTF-8"> 6<link rel="stylesheet" href="Question.css"> 7</head> 8 9<body> 10 11<div> 12<img src="img/cover.jpg" alt="cover" width="100%" height="Auto" class="cover"> 13 14<div class="name">TARO TEST<br>TEST1 15</div> 16 17<div class="introduction">This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_. 18</div> 19<div class="footnote">Copyright © <?php echo date("Y"); ?> TEST TEST - All rights reserved.</div> 20</div> 21 22 23<div class="oddnumber"> 24 <h1>1. CONTENT</h1> 25 <p>This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text.</p> 26 <img src="img/Turkish.jpg" alt="test example1" width="35%" height="auto" class=img2> 27</div> 28 29</body> 30</html>
CSS
1<style type="text/css"> 2 3.cover{ 4position:relative; 5z-index:2; 6background-position: center center; 7background-repeat: no-repeat; 8background-attachment: fixed; 9background-size: cover; 10background-color: #464646; 11} 12 13.name{ 14position:absolute; 15color:tomato; 16font-size:45px; 17left:45px; 18top:45%; 19z-index:3; 20} 21 22.introduction{ 23background-color:rgba(0,0,0,0.5); 24color:white; 25font-size:12px; 26height:auto; 27width:57%; 28padding:60px 60px 60px 60px; 29text-align:left; 30position:absolute; 31bottom:150px; 32right:0px; 33z-index:4; 34} 35 36.footnote{ 37position: absolute; 38bottom:0; 39z-index:5; 40background-color:black; 41font-size:12px; 42color:white; 43width:100vw; 44padding:20px; 45margin:0; 46text-align:center; 47} 48 49.oddnumber{ 50text-align:center; 51margin:0px; 52padding: 150px; 53background-image: linear-gradient(To Bottom, #fdfcfb 0%, lightgrey 80%); 54z-index:1; 55} 56 57img.img2{ 58margin:10px; 59} 60 61body{ 62padding:0; 63margin:0; 64} 65 66</style>
回答1件
あなたの回答
tips
プレビュー