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
9 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
9 years ago
2,791 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
9 years ago
479 posts
Thank you, awesome!

Eddy
updated by @eddy: 12/13/15 12:43:54PM
Eddy
Eddy
@eddy
9 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
9 years ago
2,791 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
9 years ago
479 posts
This worked great, thank you. :)

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


--

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

Tags