Jump to content

Community

Change Header Background to image - Strange result


Richey
 Share

Recommended Posts

Hey guys,

I try to change the background of the header with the following code in the custom css:

header:first-of-type{
	background:url(http://www.my-website.com/themes/2/images/bg_header.jpg); 
  	height:250px
}

Now when I visit a forum, the background of the topic gets changed too. Even that I use the :first-of-type selector.

What am I doing wrong. Or is there a better way of changing the header background?
(In the style wizard I only can choose colors - no images).

Thanks for your support!

 

screenshot.thumb.jpg.eaf3e31080ad7b57ae8

Link to comment
Share on other sites

  • 4 years later...

Hi there,

Could you please help me with the header. I have luck of any other ideas.

I can see is source of the main page 

<style>
  #ipsLayout_header header {
  background-color: #3d5e78;
  background-image: url(http://www.spain4you.es/forum/uploads/monthly_2016_12/699329.jpg.716a4acadcfee74382d1192a0d378f0e.jpg);
  background-repeat: no-repeat;
  background-position: center;
 

background-size: cover;

I was trying to find those values in CSS and in Templates...nothing is found.

I've tried to change header in Global.css to something like

#ipsLayout_header 
#header {
    background-image: url('{resource="Untitled.jpg" app="core" location="global"}');
     background-size: cover;
    background-position: 50% 0%;
    background-repeat: no-repeat;
   }

I've tried to keep what I have now

#ipsLayout_header header {
    padding: 5px 0;
    background-color: {theme="header"};;
    padding-bottom: 40px;

I also tried to add to custom.css

@media screen and (min-width:980px){

    #ipsLayout_header header{
      background-image: url('{resource="Untitled.jpg" app="core" location="global"}');
      background-size: cover;
      background-position: 50% 0%;
      background-repeat: no-repeat;
    }

 

Any ideas on what can be wrong? Thanks very much!

Link to comment
Share on other sites

Hey @AlFed @steve00 is correct, there is some manual style bits in your global template. I don't know how you uploaded the theme but it's still there. Particularly this bit:

<style>
#ipsLayout_header header {
  background-color: #3d5e78;
  background-image: url(http://www.spain4you.es/forum/uploads/monthly_2016_12/699329.jpg.716a4acadcfee74382d1192a0d378f0e.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  
}
</style>

Now, note that the image doesn't actually load for me at all but that's why your header color isn't changing.

To me it looks like someone copied the CSS and pasted it into a style code in your globalTemplate.

Your globalTemplate is the first thing that opens when you open the theme editor so look in that one.

Link to comment
Share on other sites

Personally, I wouldn’t call uploaded files directly with the image URL from the uploads folder. That doesn’t count as an actual use in the system and the file might get deleted later. It is better to make it a theme resource and then call it like {resource= …}

Also, make sure to not call http images, since your site is using https. At the moment, the page tries to load an http image, which by the way doesn’t even exist. 

Link to comment
Share on other sites

7 hours ago, Jennifer M said:

Hey @AlFed @steve00 is correct, there is some manual style bits in your global template. I don't know how you uploaded the theme but it's still there. Particularly this bit:


<style>
#ipsLayout_header header {
  background-color: #3d5e78;
  background-image: url(http://www.spain4you.es/forum/uploads/monthly_2016_12/699329.jpg.716a4acadcfee74382d1192a0d378f0e.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  
}
</style>

Now, note that the image doesn't actually load for me at all but that's why your header color isn't changing.

To me it looks like someone copied the CSS and pasted it into a style code in your globalTemplate.

Your globalTemplate is the first thing that opens when you open the theme editor so look in that one.

Hi Jenifer,

Thank you for the details. I see that using source code, but for ages I'm trying to find it in GlobalTemplate and in CSS. I've tried: colour code, image name, <style>, header and all other stuff and it doesn't appear nowhere. I also tried to find it manually and again failed. I will try more. Appreciate your help!

7 hours ago, opentype said:

Personally, I wouldn’t call uploaded files directly with the image URL from the uploads folder. That doesn’t count as an actual use in the system and the file might get deleted later. It is better to make it a theme resource and then call it like {resource= …}

Also, make sure to not call http images, since your site is using https. At the moment, the page tries to load an http image, which by the way doesn’t even exist. 

Thanks, unfortunately it wasn't my work, at that time I was too busy and hired someone to make what I want 🙂 Looks like I've got what I wanted 🙂

The change to https is recent... 

Link to comment
Share on other sites

 Share

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy