blog documentation FAQ followers forum marketplace services youtube

solved Adding background image to Nova skin header

The Jamroom Network » Forum » Design and Skin Customization » Page » Adding background image to Nova skin header
Eddy
Eddy
@eddy
10 years ago
479 posts
I was wondering how to add background image to Nova skin header, can anyone help me out?

Thanks

Eddy
updated by @eddy: 03/18/16 10:13:29PM
douglas
@douglas
10 years ago
2,797 posts
It depends on what type of image your wanting to put there.

The easiest way would be to add it via the header.css file.

Change this:

#header_content {
    height:100%;
    max-width:1140px;
    margin-left:auto;
    margin-right:auto;
}

to something like this for a single non repeating image:

#header_content {
    background:transparent url('{$jrNova_img_url}/YOURIMAGENAME.png') no-repeat;
    height:100%;
    max-width:1140px;
    margin-left:auto;
    margin-right:auto;
}

or like this for a repeating image:

#header_content {
    background:transparent url('{$jrNova_img_url}/YOURIMAGENAME.png');
    height:100%;
    max-width:1140px;
    margin-left:auto;
    margin-right:auto;
}

Forgot to add you'll want to change YOURIMAGENAME.png to the actual name of the image your using and have uploaded to your skins img directory.


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
updated by @douglas: 12/13/15 11:55:25AM
Eddy
Eddy
@eddy
10 years ago
479 posts
Thank you, awesome!

Eddy
updated by @eddy: 12/13/15 12:43:54PM
Eddy
Eddy
@eddy
10 years ago
479 posts
@douglas, my core_header.css looks like this now,


#header_content {
background:transparent url('{$jrNova_img_url}/headerbg.gif') no-repeat;
height:100%;
max-width:1140px;
margin-left:auto;
margin-right:auto;
}




I have uploaded the bg gif as well, but the header doesn't show the bg image.

Eddy
updated by @eddy: 12/13/15 01:37:13PM
douglas
@douglas
10 years ago
2,797 posts
Sorry, I gave you the wrong place to add the image... in your skins/YOURSKIN/css/site.css file, find this:

/* @title Head Inner Div */
/* @help This is the inner div for the site header */
.head_inner {
    background-color:#949799;
    padding:6px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px 4px 0 0;
    box-shadow: 0 0 5px #111;
}

and replace the background-color line with your background code:

/* @title Head Inner Div */
/* @help This is the inner div for the site header */
.head_inner {
    background:transparent url('{$jrNova_img_url}/headerbg.gif') no-repeat;
    padding:6px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px 4px 0 0;
    box-shadow: 0 0 5px #111;
}



--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Eddy
Eddy
@eddy
10 years ago
479 posts
This worked great, thank you. :)

Eddy
updated by @eddy: 12/14/15 06:17:30AM
douglas
@douglas
10 years ago
2,797 posts
Your welcome! :)


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Tags