Beautiful Pro RESPONSIVE Background image

[Oppugnator]

Hey folks,

I'm working on an issue about the full width header.

I'd like to make the Background image fully responsive, cause it is positioned under the primary nav menu and should work as the "header image".

My Question: do you guys know how to make a background image fully responsive in this theme?

[Brad Dalton]

Link to your site please.

---

Tutorials for StudioPress Themes.

[Oppugnator]

lernwerkstatt.blog

[Oppugnator]

Any ideas? 🙂

[Nikkis Footprint]

Hi! I don't have a solution for that, sorry..
I have a question though. How did you get this header/background picture full width like this?! I cant figure out how to make it wider and higher than this https://nikkisfootprint.com/ I prefer your size a lot.

Nikki

[Oppugnator]

Hey,

I'm sorry for the late response.

Well, basically you have to add the following Code to your functions PHP:

//*full width header
add_filter( 'genesis_seo_title', 'bhww_filter_genesis_seo_site_title', 10, 2 );
 
	function bhww_filter_genesis_seo_site_title( $title, $inside ){
	 
		$child_inside = sprintf( '<a href="%s"><img src="https://LINK to the picture you want to use.jpg" alt="%s"/></a>', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), esc_attr( get_bloginfo( 'name' ) ), esc_attr( get_bloginfo( 'name' ) ) );
	 
		$title = str_replace( $inside, $child_inside, $title );
	 
		return $title;
		
	}

After that you'll have to change some values in your style CSS.

U will be able to figure that out on your own with the help of the "inspector" tool of your brwoser.

Best wishes,
Oppugnator

[Author]

Posts