Drupal Theming-寸法制約のない背景画像

css drupal drupal-6 php theming
Drupal Theming-寸法制約のない背景画像

私は自分のサイトに新しいテーマを作成するために、基本テーマとしてzenを使用しています。 問題は、ヘッダーとフッターの背景画像が必要で、それらの高さと幅を指定するまで表示されないことです。さらに、#headerと#footer内のCSSで指定された高さと幅は、正確な寸法と一致する必要があります。元の画像(寸法が大きい)、そうでない場合、画像は適切に表示されません(一部が切り取られます)。 背景画像が自動的に調整されるように、寸法の制約なしでヘッダーとフッターのCSSを書くことができるソリューション(CSSまたはPHPを使用)がありますか? ヘッダーとフッターにはブロックが含まれていません。 CSSの一部は次のとおりです。

#header
{
          background-image:url(images/header.jpg);
          background-repeat:no-repeat;
          height:
          background-position:center;
}

#footer
{
        margin-top:0px;
        background-image:url(images/footer.jpg);
        height:391px;
        background-position:center;
}

#footer-inner
{
        text-align:center;
        padding:4px 10px 10px 10px;
}

  0  0


ベストアンサー

画像を自動的に拡大縮小したい場合は、各画像に `img`タグを使用し、幅/高さを100%に設定する必要があります。 これにより、親コンテナと同じサイズになるように自動的にスケーリングされます。 つまり、ブラウザウィンドウのサイズに応じて画像を拡大縮小する場合は、親コンテナの幅/高さを固定ピクセル幅/高さではなくパーセンテージに設定する必要があります。

そのようなことを行うサイトはほとんどありません。固定サイズの画像を再検討して使用することをお勧めします。

1


前処理機能を使用する場合、選択した画像に基づいてヘッダーとフッターのクラスを設定できるはずです。 ただし、画像に一致させるには、さまざまなクラスのCSSを作成する必要があります。

例えば:

前処理機能

function themename_preprocess_page($vars) {
  $classes = array('image1', 'image2', 'image3');

  $vars['header_class'] = array_rand($classes);
}

CSS

#header .image1 {
  background-image: url(path/to/image.jpg);
  height: [imageheight] px;
  width: [imagewidth] px;
}

うまくいけば、これは役立ちます。

0


CSSの背景画像は、配置されているdivの背景に表示されるように設計されています。 つまり、divのサイズによって、表示される画像の範囲が決まります。 この場合、ヘッダー領域にはコンテンツがないため、#headerにはlayout.cssで設定されたデフォルトの寸法があります。

発見したように、ヘッダーdivにコンテンツがない場合、最初に投稿したCSSでヘッダーのサイズを希望のサイズに明示的に設定する必要があります(推奨)または正しいサイズの空のブロック(推奨されません)まれな状況を除きます)。

0


タイトルとURLをコピーしました