Elegance

Adding a background header image - Elegance

Adding a background header image

by durangod » Fri Feb 26, 2016 2:10 pm

Hi Arty,

I have always loved your work and always use your styles on all my boards. You are so talented.. :)

I installed the elegance style on a board and was wondering what would be the easiest way to add a background image to the header? I have a Battlefield gaming board and i would like to put up a special header image on the top of the board.

Should i add the image to one of these classes here before the description section? If so im not sure which class to add the img too. And i assume it is all in stylesheet.css

here is the overall_header.html section

Code: Select all


<a id="top" class="anchor" accesskey="t"></a>
   <div id="page-header" class="page-width">
      <div class="headerbar" role="banner">
         <div class="inner">

         <div id="site-description">
            <a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><img src="{T_THEME_PATH}/images/logo.png" data-src-hd="{T_THEME_PATH}/images/logo_hd.png" /></a>
            <p class="sitename">{SITENAME}</p>
            <p>{SITE_DESCRIPTION}</p>
            <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
         </div>



I think its the headerbar but i want to be sure..

Thanks Arty :)
User avatar
durangod
Registered User
Posts: 639
Joined: Tue Nov 03, 2009 1:26 pm
Contact:

Re: Adding a background header image

by durangod » Fri Feb 26, 2016 4:18 pm

hey i went ahead and went with a full background body image instead, it looks better. In stylesheet.css i changed this section of code.

Code: Select all

html,body{color:#141414;background-color:#f0f0f0}html.simple,body


its about 3/4 the way down the file.

and i changed it to this..

Code: Select all


/* original code */
/* background-color:#f0f0f0*/

background-image: url("http://mysite.com/images/imagename.jpg");
background-repeat: repeat-y;
}
html.simple,body


then i cleared the cache from acp.

you can visit the board to see what it looks like at http://www.usplayersonlygaming.com/forum

thanks and hope you have a great day Arty.. :)
User avatar
durangod
Registered User
Posts: 639
Joined: Tue Nov 03, 2009 1:26 pm
Contact:

Re: Adding a background header image

by durangod » Fri Feb 26, 2016 5:13 pm

The above works however with such a large image it slows down the page load just a tiny bit.. so rather than having to preload the image and also having the server load the image 2x because of the vertical repeat. I decided to code it this way after finding an example online.

Code: Select all


/* new code for special bf background */
   background-image: url("http://mysite.com/images/myimage.jpg");
   background-repeat: no-repeat;
   height: 100%;
   background-size: cover;
   background-attachment: fixed;
   background-position: center;



This load faster and covers the full page with no repeat..
User avatar
durangod
Registered User
Posts: 639
Joined: Tue Nov 03, 2009 1:26 pm
Contact:

Re: background image

by Ralphort » Tue May 03, 2016 5:02 pm

Just remove the height element. It will cut off the background image on the footer area for those using ultrawide monitors. The code should be inside _custom.scss & not inside the stylesheet.css.

height: 100%;
User avatar
Ralphort
Registered User
Posts: 53
Joined: Mon Apr 18, 2016 3:53 am
Location: Windy City
Contact:


cron