CSSの背景イメージとフッターテキスト

チュートリアルを通してCSSについて学び、いくつかの空白がどのように作成されているかを調べようとしています。ページを調べると、空白はbodyタグ内にあります。 bodyタグはすべてのテキストを背景画像内に配置すると考えました。しかし、ウィンドウのサイズを変更すると、（イメージでわかるように）さまざまな程度の空白が作成されます。CSSの背景イメージとフッターテキスト

More Textの新しい行を作成して、画面のサイズを小さくすると、その間に空白を作成するのではなく、行が画像の下に残ります。助けてくれてありがとう。

HTML

{% load staticfiles %} 
<html> 

<head> 

    <title>Title</title> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
    <link rel="stylesheet" href="{% static 'css/blog.css' %}"> 
    <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css"> 

</head> 

<body> 

    <div class="page-header"> 
     <h1><a href="/">Title</a></h1> 
    </div> 

    <div class="page-footer"> 
     <h1>More text</a></h1> 
    </div> 

</body> 

</html>

CSS

h1 a { 
    color: #666699; 
    font-family: 'Lobster'; 
} 

body { 
    background-image: url('../images/Death_to_stock_photography_wild_6.jpg'); 
    background-repeat: no-repeat; 
    background-size: 100%; 
} 

.page-header { 
    background-color: transparent; 
    margin-top: 0; 
    padding: 20px 20px 20px 40px; 
} 

.page-footer { 
    background-color: transparent; 
    position:absolute; 
    padding: 20px 20px 20px 40px; 
    bottom:0; 
} 

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active { 
    color: gray; 
    font-size: 26pt; 
    text-decoration: none; 
    position: relative; 
    bottom: 10px; 
    height: 5px; 
} 

.content { 
    margin-left: 40px; 
} 

h1, h2, h3, h4 { 
    font-family: 'Lobster', cursive; 
    color: #666699; 
}

出典

2016-08-12 Jebediah15

パディングと： http://codepen.io/artchibald/pen/KrJdpY

をあなたが以下、CSSで宣言された0下を持っているようだが修正バージョンはありますか？マージン？ –

issusはパディング付きです - パディング：20px 20px 20px 40px;それを削除して試してみてください。 –

パディングを取り除いた後にサイズを変更すると、@NagaSaiAはまだ空白を残しています – Jebediah15

あなたは小さな画面用に指定された要素の属性を定義するためにメディアクエリを使用することができます。

@media screen and (max-width: 800px){ 
    .myclass{ 
     myattribute:myvalue; 
    } 
}

より簡単に、より良い解決策は、応答性の設計のためのグリッドシステムを持つブートストラップや土台などのサードパーティ製のフレームワークを使用しています。私はcodepenであなたのCSSを見

出典

2016-08-12 18:09:19 shawon191

ありがとう、私はこれを見ていましたが、まずは小さなものから始めたいと思っていました – Jebediah15

：

h1 a { 
    color: #666699; 
    font-family: 'Lobster'; 
} 

body { 
    background-image: url('../images/Death_to_stock_photography_wild_6.jpg'); 
    background-repeat: no-repeat; 
    background-size: 100%; 
} 

.page-header { 
    background-color: transparent; 
    margin-top: 0; 
    padding: 20px 20px 20px 40px; 
} 

.page-footer { 
    background-color: transparent; 
    position:absolute; 
    padding: 20px 20px 20px 40px; 
    /* REMOVE THIS--------bottom:0; */ 
} 

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active { 
    color: gray; 
    font-size: 26pt; 
    text-decoration: none; 
    position: relative; 
    bottom: 10px; 
    height: 5px; 
} 

.content { 
    margin-left: 40px; 
} 

h1, h2, h3, h4 { 
    font-family: 'Lobster', cursive; 
    color: #666699; 
}

出典

2016-08-12 18:23:54

@Archie、でも空白は残っている。 – Jebediah15

CSSの背景イメージとフッターテキスト

答えて

関連する問題