お世話になっております。jQueryかなり初心者です。
今回質問したいのが下記のコードで正常に動作しないため何が間違っているか教えていただきたいです。
jQuery $(window).on('load resize', function(){ /*基本要素大きさ*/ var w = $(window).width(); var h = $(window).height(); if(w>h){ $("#practice").css('backgroud-image','url(img/top2.png)'); }else{ $("#practice").css('backgroud-image','url(img/top3.png)'); } }); CSS #practice{ width: 100%; height: 100vh; opacity: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; position: fixed; background-size: cover; background-position:center; background-repeat: no-repeat; text-align: center; background-image: url(img/top2.png); } HTML <div style="" id="practice"></div>
やりたいこととしては、画面のタテヨコ比において画像の切り替えをjQueryのcssを使い行いたいと考えてます。
画面いっぱいに画面サイズが伸縮した場合の対策としてbackground-imageを使用しています。
よろしくお願いします。
「動作しない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
回答1件
あなたの回答
tips
プレビュー