Как подогнать картинку в background-image под разные значения медиа-запросов?

Всем привет. Сайт на wordpress. Имеется картинка в баннере, нужно сделать её адаптивной, т.е. хочу сделать разные размеры картинки под разные медиа-запросы. Всё дело в том, что background-image зашит в коде, а PHP я только начинаю учить, поэтому не могу сообразить, что нужно удалить, чтоб ничего не сломать и чтоб прописывать background-image в style.css. Помогите плиз! Вот код :

function delicious_theme_setup() {

/* Load the primary menu. */
remove_action( 'omega_before_header', 'omega_get_primary_menu' );
add_action( 'omega_header', 'omega_get_primary_menu' );
add_filter( 'omega_site_description', 'delicious_site_description' );

add_action( 'omega_after_header', 'delicious_banner' );

add_theme_support( 'omega-footer-widgets', 3 );

/* Add support for a custom header image. */
add_theme_support(
'custom-header',
array( 'header-text' => false,
'flex-width' => true,
'uploads' => true,
'default-image' => get_stylesheet_directory_uri() . '/images/header.jpg'
));

add_action( 'wp_enqueue_scripts', 'delicious_scripts_styles' );

remove_action( 'omega_before_entry', 'omega_entry_header' );
add_action( 'omega_before_entry', 'delicious_entry_header' );
remove_action( 'omega_before_loop', 'omega_archive_title');

}

add_action( 'after_setup_theme', 'delicious_theme_setup', 11 );

function delicious_site_description($desc) {
$desc = "";
return $desc;
}

/**
* Display the default entry header.
*/
function delicious_entry_header() {

echo '';
if ( is_home() || is_archive() || is_search() ) {
?>
<?php the_title(); ?>
<?php
get_template_part( 'partials/entry', 'byline' );
}
echo '';

}

function delicious_get_header_image() {
if ( has_post_thumbnail(get_queried_object_id()) ) {
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id( get_queried_object_id() ), 'full' );
echo esc_url( $image_url[0] );
} elseif (get_header_image()) {
echo esc_url( get_header_image() );
}
}

function delicious_banner() {
?>



<?php
$id = get_option('page_for_posts');
// get title
if (is_front_page() || (is_home() && ($id=='0'))) {
$the_title = "" . get_bloginfo ( 'description' ) . "";
} elseif ( is_day() || is_month() || is_year() || is_tag() || is_category() || is_home() ) {
$id = get_option('page_for_posts');
if ($id=='0') {
$the_title = get_bloginfo ( 'description' );
} else {
$the_title = get_the_title($id);
}
$the_title = "$the_title";
} else {
$the_title = "" . get_the_title() . "";
}
echo $the_title;
if (is_singular('post' )) {
get_template_part( 'partials/entry', 'byline' );
} elseif(is_archive() || is_search() ) {
delicious_archive_title();
}
?>



<?php
}

function delicious_archive_title() {
if(is_archive() || is_search() ) {
?>

<?php
if ( is_category() ) :
single_cat_title();

elseif ( is_search() ) :
printf( __( 'Search Results for: %s', 'delicious' ), '' . get_search_query() . '' );

elseif ( is_tag() ) :
single_tag_title();

elseif ( is_author() ) :
/* Queue the first post, that way we know
* what author we're dealing with (if that is the case).
*/
the_post();
printf( __( 'Author: %s', 'delicious' ), '' . get_the_author() . '' );
/* Since we called the_post() above, we need to
* rewind the loop back to the beginning that way
* we can run the loop properly, in full.
*/
rewind_posts();

elseif ( is_day() ) :
printf( __( 'Day: %s', 'delicious' ), '' . get_the_date() . '' );

elseif ( is_month() ) :
printf( __( 'Month: %s', 'delicious' ), '' . get_the_date( 'F Y' ) . '' );

elseif ( is_year() ) :
printf( __( 'Year: %s', 'delicious' ), '' . get_the_date( 'Y' ) . '' );

else :
_e( 'Archives', 'delicious' );

endif;
?>

<?php
// Show an optional term description.
$term_description = term_description();
if ( ! empty( $term_description ) ) :
printf( '%s', $term_description );
endif;
?>

<?php
}
}

function delicious_scripts_styles() {

wp_enqueue_script('delicious-parallax', get_stylesheet_directory_uri() . '/js/parallax.js', array('jquery'));
wp_enqueue_script('delicious-menu', get_stylesheet_directory_uri() . '/js/menu.js', array('jquery'), '1.0.0', true );
wp_enqueue_script('delicious-init', get_stylesheet_directory_uri() . '/js/init.js', array('jquery'));
}

function delicious_load_theme_textdomain() {
load_child_theme_textdomain( 'delicious', get_stylesheet_directory() . '/languages' );
}

add_action( 'after_setup_theme', 'delicious_load_theme_textdomain' );
?>
  • Вопрос задан
  • 623 просмотра
Решения вопроса 1
keira_YES
@keira_YES Автор вопроса
С приоритетами, слава Богу, знакома! :) Всё, спасибо, ребят, я удалила всего строчку в PHP и всё вышло :) Ура!
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
deniscopro
@deniscopro Куратор тега WordPress
WordPress-разработчик, denisco.pro
Привет.

А добавление css-свойства background-size не решит вопрос с адаптивностью?

header {
    background-size: cover;
}
Ответ написан
@Cyber_bober
Измените разрешение изображения, 2000px жирно даже для 27" монитора. Если у вас есть доступ к выгрузке и формированию фронтенда, то вы можете воспользоваться гайдом от нетологии. А вообще, автор выше правильно написал, вы можете задать
background-size:cover;

и еще
background-position:50% 50%;
чтобы изображения растягивались относительно центра
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы