Changing Header Image

Hi ??

The path I see to the header image is /blog/wp-content/themes/connections/img/top.jpg

So you can either:

a.) Name your new image and replace the top.jpg file in that directory.

Or:

b.) Change the path in your style.css file in the /blog/wp-content/themes/connections/ directory.

(Hint: look for “top.jpg” in the file and replace it there)

Well, I got it part correct. The top.jpg image is gone but mine didn’t appear. What did I do wrong? My image is:

http//www.homedesignsense.com/blog/personalheader.jpg

Just try to type your own domain without TYPO in your stylesheet ??

D’oh! Tacky fingers strikes again! ??

OK did that, but the image is hardly showing. Where is the rest of it?

Is your image the same size as the original? If not, you’ll have to edit the css to give it new height/width dimensions.

Where do I find the orginal’s size?

In your stylesheet, you have the image set, but you have the position set as only “bottom”. If you set one part of the position, you *have* to set the other. Change “no-repeat bottom” to “no-repeat left bottom”

Of course, when you do that, the bottom of th eimage shows up. If you want the top, it should be “no repeat left top”. (It’d probably do you well to change the size of your image, as only part of it is showing up.)

Where do I find the size of the original image, so I can make mine the same height and width?

In the images folder, right click on the image and select properties. Sometimes just hovering over the image will show the right info, depending on browser.

OK. I’ll do a new size an let you know. The size of the original is w=787px x h=185px in case you wanted to know ??

Yep, that’s the easiest way to ease into your own header graphic; other solutions can whack the whole layout.

OK. I got it to work. It’s not exactly centered, but close. Can it be better centered?

https://www.homedesignsense.com/blog

You should check out connections reloaded at https://ajaydsouza.com/wordpress/wpthemes/connections-reloaded/

If nothing else, he posted a seperate header image that can be manipulated (without losing shadings/border like yours).

CHange this in your stylesheet:

#header {
background:#fff url(https://www.homedesignsense.com/blog/bloghead.jpg) no-repeat left bottom;

to this:

#header {
background:#fff url(https://www.homedesignsense.com/blog/bloghead.jpg) no-repeat 6px 10px;