Change the header background

satori38 · June 2017

I've been trying to change the header background into an image. So far I haven't been able to do so. I've also just tried to change the color. Neither one has worked. Am I doing something wrong. My site is f59.b38.myftpupload.com/ I would actually like to add a header background image, so it's not just a white background.

Bryan · June 2017

Hi,
Try using this custom css

#Top_bar {
	background-image:url('your-image-url')no-repeat center center !important;
	background-size:cover !important;
}

thanks

satori38 · June 2017

I put in the code in the custom css area, but it didn't seem to work. I've tried both and image and also to change the color. The header background is still white. Any other options?

Albert · June 2017

What exactly does not work? Also, do you know what your-image-url means in above css? Looks like you copied whole css and didn't made any changes in it.

satori38 · June 2017

Oh shoot. I'm sorry. I was trying to upload it after I put the code in. Sorry about that. I thought it over-ride the code, so I could upload through the Betheme option. Thanks for explaining.

satori38 · June 2017

I've tried putting the code in custom css with the image url.

#Top_bar {
	background-image:url('your-image-url')no-repeat center center !important;
	background-size:cover !important;
}

I started by putting the entire url in starting with http:// f59.b38.myftpupload.com/wp-content/uploads/2017/06/1600-900-baby-blue-eyes-solid-color-background.jpg

f59.b38.myftpupload.com/wp-content/uploads/2017/06/1600-900-baby-blue-eyes-solid-color-background.jpg

/wp-content/uploads/2017/06/1600-900-baby-blue-eyes-solid-color-background.jpg

and taking it all the way down to /1600-900-baby-blue-eyes-solid-color-background.jpg, but for some reason it is not working.

Any idea what I'm doing wrong?

This was the very final version I tried.

#Top_bar {
	background-image:url('/1600-900-baby-blue-eyes-solid-color-background.jpg')no-repeat center center !important;
	background-size:cover !important;
}

Bryan · June 2017

You have a space after the http://

http:// f59.b38.myftpupload.com/wp-content/uploads/2017/06/1600-900-baby-blue-eyes-solid-color-background.jpg

remove it and then insert it in the css

satori38 · June 2017

I put that space there because when I tried to leave it in the comment section, it would erase it. There is not a space when I insert in the custom css. It would not work still. I've even tried narrowing it down to the path from

/wp-content/uploads/2017/06/1600-900-baby-blue-eyes-solid-color-background.jpg

to

/1600-900-baby-blue-eyes-solid-color-background.jpg

and it still didn't work.

Bryan · June 2017

Please send a link to the page and point to the element your are setting the background. Do not shorten the URL, this will not work in wordpress. Please place a full URL.

thanks

satori38 · June 2017

This is the link to the page. It's on a temporary domain at the moment.

http://f59.b38.myftpupload.com

Here is the element I am point to for the background.

http://f59.b38.myftpupload.com/wp-content/uploads/2017/06/1600-900-baby-blue-eyes-solid-color-background.jpg

satori38 · June 2017

The first one is an image of the header that is white.

https://www.flickr.com/photos/29347598@N07/34753338983/in/dateposted-public/

The second image is of the code installed with the url from above set inside the code.

https://www.flickr.com/photos/29347598@N07/35394436002/in/dateposted-public/

Bryan · June 2017

Okay, try using background instead of background-image

http://prntscr.com/fou9sb

It worked for me.

satori38 · June 2017

OMG! That worked. Thank you so much for suggesting background instead of background-image. I've been pulling my hair out trying to figure this out. Thanks again.

Change the header background

Comments

This website uses cookies