Header Background - image instead of color

Permalink Browser Info Environment
I would like to use an image instead of a solid color for the header background. Can I do this in the "Add Your CSS" section or do I need to edit the main.css? I'd rather ask than attempt trial/error at this point. Thank you!!

Type: Discussion
Status: In Progress
JRTaylorMusic
View Replies: View Best Answer
abarclay replied on at Permalink Reply
abarclay
Just one content area? Would the design function in concrete help? Click on the content, click design, second tab is background and you can add an image there.
JRTaylorMusic replied on at Permalink Reply
JRTaylorMusic
No, for the entire header background in the Slate theme. The solid color is customizable in the Themes => Customize panel, but I would like to use an image instead. I figure this is done in the main.css, although there might be a command to add in the Customize panel like there is for the page background, per Slate documentationhttp://c5mix.com/support/documentation/slate/...
abarclay replied on at Permalink Reply
abarclay
Gotcha. I thought that might be the case but also figured I might as well throw my suggestion out there in case it wasn't.

I feel like I've seen that in a thread on here but I couldn't find it for the life of me. I'll keep poking around since I'm on the hunt for a solution to another problem.

Hopefully there is an easy way to do it. If I am following you, I wanted to do something similar and just made the whole site name content area 100% of the width in the main css file. Now I'm looking for a clean place to do social media icons and would potentially like the header content area back.
JRTaylorMusic replied on at Permalink Best Answer Reply
JRTaylorMusic
I figured it out and it's super easy! I'm still learning this stuff as I go, so I'm gradually figuring out some basic stuff...

I simply added a line the same way that the documentation specifies for adding a background to the body using "Add Your CSS" under the theme customization:
body { background-image:url(http://yourdomain.com/path/image.jpg); }


Only I specified "header" like this:
header { background-image:url(http://yourdomain.com/path/image.jpg); }
c5mix replied on at Permalink Reply
c5mix
Yep, exactly. The easiest/best way.
chassa2556 replied on at Permalink Reply
chassa2556
can I jump in on this - I have a nav that overlaps the background pic in the header. Would this background be responsive what would be the best way of handing a nav bar that goes over a background image?
c5mix replied on at Permalink Reply
c5mix
You probably want to change the background-size to contain in the css. See this for more info:http://davidwalsh.name/background-size...
kentek replied on at Permalink Reply
kentek
I tried this on C5.7 and made a save | approve but nothing changed.
header {background-image:url (http://files/myfilenane.jpg);}

I am trying to use a file within the C5 file manager so should it be ":url(file:///filelocation/filename.jpg);} ?
And where is this code located?
How do I undo this?

Thanks for your help.
brisseo replied on at Permalink Reply
brisseo
Hi!

@ JRTaylorMusic.. Just letting you know.. about 5 years after your post.. and this worked beautifully for me!

I had been looking for a solution for ages.. this took me about 30 seconds to do!!

Thanks again!

Cheers,
Edith :)

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.