Jump to content

Recommended code for changing header background image?


socceronly

Recommended Posts

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. 

Link to comment
Share on other sites

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;
}
  
}

 

 

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...