h3 - different background urls

HTML & CSS
1

What am I doing wrong here? In this page HERE I’m trying to get the second h3 (Pet Sitting Services) to have a different background url. The code I have now is:

h3.petsit {
  font-weight: normal;
  font-size: 140%;  
  font-family: "Palatino Linotype", Baskerville, serif;  
  color: #3059C3;
  border-bottom: 2px black solid;
  background: url(pet-sitting.jpg) no-repeat;
  padding: 8px 0 6px 80px; 
}

I bascially doubled the code from the first h3 and changed the background url. I tried “h3 petsit,” “Content h3.petsit,” etc.

If someone could help me out with the proper code, I’d appreciate it.

Link for CSS: http://nkdogwalking.com/style1.css

2

You just need to set that class on that h3 in the html :slight_smile:

<h3 class=“petsit”>Pet Sitting Services</h3>

If the BG image is the only difference in the generic h3 rules then it is the only thing needed in the css.


h3[COLOR=Blue].petsit[/COLOR] {
  background: url(pet-sitting.jpg) no-repeat; 
}
3

Yikes! Man, I’m so embarrassed right now. What the heck happened there. I know that I had changed it to exactly that at one point. I must have fooled around with it and forgot to change it back. Man, I really need to pay more attention to what changes I’ve done before posting a new thread like this. Thanks for showing me error. I appreciate that. And good to know I don’t have to repeat all of the rules.

4

I must have fooled around with it and forgot to change it back.
I knew it was just an oversight on your part, you would have caught it soon enough :wink:

Just be aware though, if you have any other h3s on the site they will be picking up the BG image too. You could add the parent ID to those selectors to give them more specificity.

5

How many times have I come into these forums and asked similar “ooof!” questions? (Rayzur’s answered a ton of them. :slight_smile: ) Don’t feel bad, sometimes you just need another set of eyes on the code to catch the “obvious” errors.

6

Here’s what I would do :smiley:

I would move the icon from “Services & Rates” to > “Dog Walking Services”

Then I would make a new icon with a [Bone and $] for “Services & Rates”

7

Hi Rayzur. Been meaning to get back to you. Yes, that is a great idea. I did think that maybe that would look better (switching the dog walker icon to dog walking services). But I also was thinking it should stay consistent for all h2s. Also, another readon I put the “fetch” icon in dog walking services is because I want potential clients to know that fetch is part of my services if asked. So I’m torn between taking that out or not. I just don’t want people thinking it has to be just dog walking. One thing is for sure… I need that “$” icon. I want the picture changed, too. Trust me, I’ve searched hard on sites like morguefile, flickr, and picasa web albums. Have yet to find one that would suit that page well.

EDIT: I’m on istockphoto right now. What do you think of this: http://www.istockphoto.com/stock-photo-2655477-setter-dog-with-money.php

Never bought a stock photo before. I could probably get away with the Small size for $3 dollars.

8

I’m on istockphoto right now. What do you think of this:

Hi,
I think your going to want to look for a vector image so you can scale it up or down without losing resolution.

I just did a quick search on google images for “dog bone icon” and came up with all kinds of samples from stock photos.

There were a lot of dog icon collections in vector format. [URL=“http://www.istockphoto.com/stock-illustration-13522396-black-symbols-dog.php”]This Set has some simple clean looking icons in it.

You could crop them out as needed with a collection like that

9

Here is what I had in mind for “Services & Rates”

Or something like that :slight_smile:

10

Thanks, Rayzur. What did you do… you just added two images ($/bone) into one to get that?

11

It was just one image, the bone, which accounted for one layer. The $ sign was just a text layer.

Those two layers were then merged to the background to form one image.

I’m just a newbie when it comes to graphics and I’m still learning with gimp.

It looks like all your other icons are 36-39px tall. I could scale that one down for you if you like it.