AnnaHavanna

Thanks!!!

Thanks. While waiting I created a new image class called “teamfotos” and added the following code with similar success:

img.teamfotos {
	border: 1px solid #006699;
	padding:1px;
	}

But in both cases I only create a border around my images. My aim is to change the bold light grey background around each image:

https://apotheke-sauter.de/team/

Thanks for help!

Yes, I am getting closer.

That’s where I am stuck:
The background color field of the menu names like “Team” etc. should be less wide in the “hovering mode”. By this my custom image “S” will be visible like in the non-hovering situation.

Ideas??

https://goo.gl/03sHi

I am already using Firebug. I am a newbie and I am learning CSS at the moment. But I cannot figure out what to do. Thanks!

@josh (Ult. Tinymce):
Thanks for your ideas. Now I know better what I need. I am trying to explain:

1) The hovering background color should be white. Like the background of the inverted menu image.

2) How can I reduce the background color of menu names like “Team” etc. Shall the image be wider in the “hovering mode” when in choose TRANSPARENT in the following code?

#access ul li:hover {
    background: url("https://apotheke-sauter.de/wp-content/uploads/2013/04/logo_sauter-s.jpg") no-repeat scroll 0.5em 0.5em transparent;
}

@udaraaka: Now I am very confused. I just copied this path of the source of my live website. I am using my custom style.css. Any other changes I made appeared in my live website. Do you have any idea what’s wrong?

<link rel="stylesheet" type="text/css" media="all" href="https://apotheke-sauter.de/wp-content/themes/childoftwentyeleven/style.css" />

Can you please help me out. I do have a Child Theme. I know all the advantages. Thanks!!!

I changed the background like udaraaka mentioned to TRANSPARENT in my child theme, but it does not work… Any idea?

#access a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: transparent;
	color: #373737;
}

@esmi: I do have a Child Theme.
@udaraaka: Thanks for your help! I changed the background to TRANSPARENT in my child theme, but it does not work… Any idea?

#access a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: transparent;
	color: #373737;
}

@esmi: I do have a Child Theme.
@udaraaka: Thanks for your help! I changed the background to TRANSPARENT in my child theme, but it does not work… Any idea?

#access a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: transparent;
	color: #373737;
}

I am learning every day ??
Thanks! And good night!

Yes. I am a newbie and set up this whole website.
But at some points I cannot figure out how to approach my aim. E.g. positioning my little menu image…

I am trying very hard to understand css.
Yes, I tried WPyogi’s suggestion. It worked very well. The image appeared! Wow!
What will be my approach to find the right position of the image? It shall be at the beginning of each menu item.
You guys are great. This forum is really helpful. Thanks.

I would like to put the little image to every menu item.

Where will the css class “sautericon” be defined? In my style.css? What will be the code?

Thanks for help!

I am trying to add the image to my menu…

I inserted the image in my custom style.css. It worked on my local BitNami Server. Online it does not work.
Code:

#access .sautericon a {
background:url(‘https://apotheke-sauter.de/wp-content/uploads/2013/04/logo_sauter-s.jpg’) no-repeat 0.5em 0.5em #0064ae;
}

#access .sautericon a {
padding:0 1.2125em 0 2.8em;
}

#access .sautericon a:hover, #access .sautericon a:focus {
background:url(‘https://apotheke-sauter.de/wp-content/uploads/2013/04/logo_sauter-s_inv.jpg’) no-repeat 0.5em 0.5em #ffffff;
}