드루팔 (Drupal Theming) - 크기 제한이없는 배경 이미지

저는 기본 테마로 zen을 사용하여 내 사이트의 새로운 테마를 만듭니다. 문제는 내가 높이와 너비를 지정할 때까지 표시되지 않는 머리글과 바닥 글에 대한 배경 이미지를 원합니다. 또한 #header와 #footer 내부의 CSS에 지정된 높이와 너비는 원본 이미지 (크기가 큽니다). 그렇지 않으면 이미지가 제대로 표시되지 않습니다 (일부는 잘림). CSS 나 PHP를 사용하는 솔루션이 있나요? 그러면 머리글과 바닥 글에 대한 CSS를 작성할 수있게되었습니다. 따라서 배경 이미지가 자동으로 조정됩니다. 머리글과 바닥 글에는 블록이 없습니다. 다음과 같이 CSS의 일부는 다음과 같습니다 -드루팔 (Drupal Theming) - 크기 제한이없는 배경 이미지

#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; 
}

출처

2009-12-26 niting

CSS의 배경 이미지는 배치 된 div의 배경에 자신을 표시하도록 설계되었습니다. 즉, div의 크기가 표시되는 이미지의 범위를 결정합니다. 귀하의 경우 헤더 영역에 내용이 없기 때문에 #header의 기본 크기는 layout.css에 설정되어 있습니다.

헤더 div에 내용이없는 경우 헤더의 크기를 처음 게시 한 CSS (권장) 또는 올바른 크기의 빈 블록으로 원하는 크기로 명시 적으로 설정해야합니다 치수 (희소 한 경우를 제외하고는 권장하지 않음).

출처

2010-01-06 13:50:01 keithm

하면 이미지가 자동으로 확장하려는 경우, 각 이미지에 대한 img 태그를 사용하고, 100 % 너비/높이를 설정해야합니다. 그러면 자동으로 부모 컨테이너와 동일한 크기로 확장됩니다. 즉, 브라우저 윈도우의 크기에 따라 이미지 크기를 조정하려면 부모 컨테이너의 너비/높이를 고정 된 픽셀 너비/높이가 아닌 백분율로 설정해야합니다.

그런 사이트는 거의 없으며 고정 된 크기의 이미지를 재고하고 사용해야 할 수 있습니다.

출처

2009-12-26 22:07:09

사전 처리 기능을 사용하는 경우 선택한 이미지를 기반으로 머리글 및 바닥 글에 대한 클래스를 설정할 수 있어야합니다. 이미지를 맞추기 위해 다른 클래스의 CSS를 만들어야합니다. 예를 들어

전처리 기능

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

는 희망이 도움이

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

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

CSS.

출처

2009-12-28 21:11:46

드루팔 (Drupal Theming) - 크기 제한이없는 배경 이미지

답변

관련 문제