レスポンシブなカウントダウンが背景画像に合わせる

Question

カウントダウンタイマーをどのように応答させることができるかについて助けを求めたいと思います。ウィンドウサイズを拡大/縮小するたびに、ノートブックの背景イメージの中央に配置されます。私はまだメディアクエリに精通していない。さらに、紙のデザインが背景イメージに埋め込まれているので、2つを揃えるのは難しいことです。

（編集でこれを追加）私は尋ねることも忘れました。このコードでは、ここでうまく動作します（ほとんど）。私は私のCSSに宣言された他のp {}を持っていると言及する必要があります。だから私は具体的に.bg p {}をどのようにターゲットできますか？それはそうなので、私のCSSの前のpは{}また、ここではコード HTML

<div class="bg"> 
<p id="countdown"> </p> 
</div> 

CSS

.bg { 
    background-image: url('http://thefeministmegaphone.com/wp-content/uploads/2016/12/893146-notebook-wallpaper.jpg'); 
    background-size: 100%; 
    background-repeat: no-repeat; 
    position:fixed; 
    width:100%; 
    height:100%; 
    left:0; 
    top:0; 
    text-align:center; 
} 
p#countdown { 
    transform: rotate(-5deg); 
    display:block; 
    color: #333; 
    font-size: 65px; 
    font-family:times; 
    margin: auto; 
    width: 60%; 
    padding: 10px; 
    top:50%; 
} 
@media screen and (width: 800px) { 
    .bg p { 
    font-size: .8em; 
    } 

JSある

に取り組んでカウントダウンイムに影響を及ぼし

// Set the date we're counting down to 
var countDownDate = new Date("Oct 14, 2017 10:00:00").getTime(); 

// Update the count down every 1 second 
var x = setInterval(function() { 

// Get todays date and time 
var now = new Date().getTime(); 

// Find the distance between now an the count down date 
var distance = countDownDate - now; 

// Time calculations for days, hours, minutes and seconds 
var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
var seconds = Math.floor((distance % (1000 * 60))/1000); 

// Output the result in an element with id="countdown" 
document.getElementById("countdown").innerHTML = days + "d " + hours + "h " 
+ minutes + "m " + seconds + "s "; 

// If the count down is over, write some text 
if (distance < 0) { 
    clearInterval(x); 
    document.getElementById("countdown").innerHTML = "EXPIRED"; 
} 
}, 1000); 

Answer 1

私は以下のコデインを作成しました。

CODEPEN

これを行うためのより良い方法かもしれないが、私は右のアライメントを取得し、フォントの全角測定を使用する割合を使用しました。

複数のブレークポイント（1024pxなど）を使用して、サイジングを調整することができます。

@media screen and (max-width: 768px) { 
    .bg p { 
    margin-top: 20%; 
    font-size: 2em; 
    } 

Answer 2

は、この追加のコードを

<div class="bg"> 
    <p class="makecenter" id="countdown"> </p> 
    </div> 

CSSの変更を追加します。

.makecenter { 
height: 150px; 
width: 500px; 
position: fixed; 
top: 50%; 
left: 50%; 
margin-top: -100px; 
margin-left: -200px; 

}

Answer 3

CSSスタイルに 'P'

.bg > p { 
position: relative; 
color: #333; 
font-size: 350%; // change font-size accordingly. 
text-align: center; 
margin: 0; 
top: 40%; // change position accordingly 
left: 50%; // change position accordingly 
transform: rotate(-5deg) translate(-55%, -50%); 

}