Recommended code for changing header background image?

[socceronly]

Is there any recommended code to change the header background image in 4.4+ on the default theme?

Thanks
JM

 

 

[opentype]

What header background image? 

[socceronly]

Sorry, not changing I guess but adding. 

Wondering how to add a background image to the default theme header. 

I have seen some code, but it was several years old so I am wondering if there is a newer way to do it. 

JM

[Adlago]

Try this - add in your Custom CSS

#ipsLayout_header header{background-image: url("url to your img");background-repeat: no-repeat; background-size: 100% 100%}

 

[socceronly]

2 hours ago, Adlago said:

Try this - add in your Custom CSS

#ipsLayout_header header{background-image: url("url to your img");background-repeat: no-repeat; background-size: 100% 100%}

 

Thanks I'll give that a shot.

For some reason I thought it would be far more involved. 

[The Old Man]

32 minutes ago, socceronly said:

For some reason I thought it would be far more involved.

Sometimes I find I also need to adjust the position of the user menu and/or logo via the custom css template depending upon the nature of the header image. Also, using the theme resources to upload your background image is useful because it will get ncluded if you use S3 remote storage etc. Just use the resource ID and location in your CSS:-

.ipsApp_front #ipsLayout_header header {
	background-color: #000000;
  	padding-top: 30px;
	padding-bottom: 30px;
	background-image: url('{resource="custom_images/header_2018_3840x400plain.jpg" app="core" location="global"}');
    background-repeat: no-repeat;
	background-position: 100% 0;
	background-size: contain;
}

#elLogo img {position: relative; top: -20px;}

The background-size: contain or cover selector setting can be useful too depending upon the size of your image.

To move the user menu or make transparent:

/* Make User Menu - smokey black transparent glass effect with black border. Add an optional border-radius of say 15px for rounded corners */
#elUserNav {background: rgba(0,0,0,0.3); padding: 5px 10px 10px 10px; border: 1px solid #000000;}


/* Make User Menu - transparent with no border */
#elUserNav {background-color: transparent; padding: 5px 10px 10px 10px; border: 0 none;}

You may also benefit from having a different image entirely for phones, or tweaking the positioning such as:

/* PHONES */
@media screen and (max-width: 767px) {

.ipsApp_front #ipsLayout_header header {
background-color: #000000;
padding-top: 50px;
width: 100%;
height: auto;
padding-bottom: 0px;
background-image: url('{resource="custom_images/my_header_img.jpg" app="core" location="global"}');
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: contain;
}
  
}

 

 

 

[socceronly]

Oh, that is fantastic. 

I will try this too.

Thanks everyone!

JM