How to fit an image in background-image to different media query values?

Question

PHP

Hello. Site on wordpress. There is an image in the banner, you need to make it adaptive, i.e. I want to make different image sizes for different media queries. The thing is that the background-image is hardwired in the code, and I'm just starting to learn PHP, so I can't figure out what needs to be removed so as not to break anything and to prescribe the background-image in style.css. Help plz! Here is the code:
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 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 = "
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' );
?>

Answer 1

With priorities, thank God, familiar! :) That's it, thanks guys, I deleted just a line in PHP and everything came out :) Hooray!

Answer 2

Hello. Wouldn't adding the background-size
css property solve the responsive issue?

header {
    background-size: cover;
}

Answer 3

Change the resolution of the image, 2000px is bold even for a 27" monitor. If you have access to uploading and forming the frontend, then you can use the netology guide . In general, the author above wrote correctly, you can also set
the
images to stretch relative to the center