WordPress.org

Make WordPress Core

Ticket #26856: 26856-adjust-background-size-header-images.diff

File 26856-adjust-background-size-header-images.diff, 1.5 KB (added by senlin, 8 years ago)

Adjust background size of header image(s) with media query

  • src/wp-content/themes/twentythirteen/inc/custom-header.php

    diff --git src/wp-content/themes/twentythirteen/inc/custom-header.php src/wp-content/themes/twentythirteen/inc/custom-header.php
    index 3214f63..6c01258 100644
    function twentythirteen_header_style() { 
    107107                        background: url(<?php header_image(); ?>) no-repeat scroll top;
    108108                        background-size: 1600px auto;
    109109                }
     110                @media (max-width: 767px) {
     111                        .site-header {
     112                                background-size: 768px auto;
     113                        }
     114                }
     115                @media (max-width: 359px) {
     116                        .site-header {
     117                                background-size: 360px auto;
     118                        }
     119                }
    110120        <?php
    111121                endif;
    112122
  • src/wp-content/themes/twentythirteen/style.css

    diff --git src/wp-content/themes/twentythirteen/style.css src/wp-content/themes/twentythirteen/style.css
    index 0ad8a2c..02deef5 100644
    footer.entry-meta { 
    27462746
    27472747/* Collapse oversized image and pulled images after iPad breakpoint. */
    27482748@media (max-width: 767px) {
     2749        .site-header .home-link {
     2750                min-height: 0;
     2751        }
     2752        .site-title {
     2753                font-size: 36px;
     2754                padding: 8px 0 10px;
     2755        }
    27492756        .entry-content img.alignleft,
    27502757        .entry-content .wp-caption.alignleft {
    27512758                margin-left: 0;
    footer.entry-meta { 
    29432950
    29442951/* Mobile devices */
    29452952@media (max-width: 359px) {
     2953        .site-title {
     2954                font-weight: normal;
     2955        }
     2956        .site-description {
     2957            clip: rect(1px, 1px, 1px, 1px);
     2958            position: absolute;
     2959        }
    29462960        .gallery {
    29472961                margin-left: 0;
    29482962        }