2016-11-11 9 views
0

SASSとHTMLを使用して別の画像の上に小さな画像を配置しようとしています。私はコーディングの初心者ですので、何が間違っているのか分かりませんが、他の人には明らかかもしれません。SASSを使用してバックグラウンドに画像を投稿

「mklogo」と表示された小さな画像を「迷路」画像の上に置こうとしていますが、唯一の画像は「迷路」画像です。

誰かが私に手を差し伸べることができますか?

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
    <title>Maze Assignment</title> 
     <script src="node_modules/jquery/dist/jquery.min.js"></script> 
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="css/style.css"> 
     <script src="js/main.js"></script> 
</head> 
<body> 
    <div id="mklogo"></div> 
</body> 
</html> 

ここには、.scssファイルの下にあるSASSがあります。

html, body{ 
    background: url("../images/maze.png") no-repeat center center fixed; 
    background-size: 100% 100%; 
    image-rendering: pixelated; 
    image-rendering:-moz-crisp-edges; 

} 

#mklogo{ 
    background: url("../images/mkLogo.png"); 
    width:5vw; 
    height:5vw; 
    position:absolute; 
} 

本当にありがとう。

答えて

0

#mklogoは完全に配置されており、ドキュメントフローから削除されています。 bodyに高さと幅を設定しない限り、body#mklogoに合わせて拡張されません。 bodyの明示的なサイズ(100vw100vhなど)を設定してみてください。これはうまくいくはずです。

また、bodyでは背景画像のみを設定し、htmlでは設定しないでください。

関連する問題