Change the header background

satori38

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

Hi,
Try using this custom css

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

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

satori38

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

satori38

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

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

satori38

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

satori38

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

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

Okay, try using background instead of background-image

http://prntscr.com/fou9sb

It worked for me.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

satori38

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.