Adding div with bg image to header.php

If you’re adding the css to your styles.css, you only need
background-image:url (images/fb_icon.png);

If I were you, I would put a border around it, just for testing purposes.

Thanks for the advice! I have added a border which I can now see… but when I inspect the header, the bg image style has a strike through it. This is a child theme… are you sure I can just use background-image:url (images/fb_icon.png);?

Thanks!

Oh the site is justiceforchloe.com

Thanks!

I also don’t know why the width is so long… the div should only be 156px wide. ??

If you’re using a child theme, then you could insert an images folder in your child theme, but just to make sure, I would use the full url.

So use – background-image:url (https://justiceforchloe.com/wp-content/themes/colorway_child/images/fb_icon.png);

if you want the fb logo to appear to the right, you should use:

.fb-header {
height: 120px;
width: 156px;
background-image:url (https://justiceforchloe.com/wp-content/themes/colorway_child/images/fb_icon.png);
float:right;
}

Also I see that you’ve added padding-left. Just get rid of that. That’s what’s causing the box to be so big

Thank you so much! Now the box is the right size and in the right place but I can’t see the image. It is still marked through in firebug, but when I go to the url in chrome the image is there.

Any thoughts?

Thank you so much for your help!

Try removing the space between url and (

so

background-image:url(https://www.justiceforchloe.com/wp-content/themes/colorway_child/images/fb_icon.png)

CSS can be so frustrating at times. :/

Woo hoo! Thank you so much! So to actually link it to the fb page I would do that in the php file, correct?

Thanks for your help!

to actually link it to the fb page I would do that in the php file, correct?

Yes, that’s right.

Where you inserted <div class="fb-header></div>

Just change that to <div class="fb-header><a href="link to fb goes here"></a></div>

If the link doesn’t work, try changing our css to:

.fb-header {

Hello,
I changed the background image in the css… but that’s all I changed and I can’t get the link to work.

Here is my css:
.fb-header {
height: 120px;
width: 156px;
background-image:url(https://justiceforchloe.com/wp-content/themes/colorway_child/images/donate_icon.png);
float:right;
margin-right:25px;
margin-top:10px;
}

and here is what is in my header.php:
<!–Start Header Grid–>
<div class=”grid_24 header”>
<div class=”fb-header”>
</div>

The image has changed but I can’t seem to get it to link to the correct page.

Can you help me?

Thank you thank you!!!

<div class=”grid_24 header”>
<div class=”fb-header”>
</div>

You need to insert the link in there as I mentioned in my earlier response.

For some reason every time I copy what I have it doesn’t show on here????

It looks exactly like what you typed though.
(<div class=”fb-header”></div>)

Ah.. I see my mistake… The CSS I gave you is wrong. I meant to write:
Change your css to

.fb-header a {
   ...
}

You want the style to be for the anchor in the div with the fb-header class.

Sorry about that.

YEAH!!
Thank you sooo much for your help! I don’t know very much about php but I am trying to help set up this donation site!

You have really done your good deed!!!

Many MANY thanks!!
Nicole

No Problem Nicole, happy to help.