I have a rollover top menu. Im trying to get it so my background image (17px x 13px) appears on hover in the center. I've tried all the background css attributes and nothing seems to work. Am I going about this the wrong way?
Here is my CSS:
#navlist a:hover
{
color: #fff;
background-color: #b2b85c;
text-decoration: none;
background-image: url(Images/pointer.jpg);
background-position: center bottom;
background-attachment: fixed;
}
Here is a link to the page.
http://kerrydean.ca/Grey%20River/greyRiverTemplate2.html
By navigation I assume you mean the top menu.
Try adding background-repeat: no-repeat; to your CSS rule for #navlist a:hover
Related
In Genesis framework, I can't figure out how to add content directly over background image (without the white body text box). The website is www.vacounseling.com. Please help!
CSS code:
body.home { background-image: url("https://www.vacounseling.com/wp-
content/uploads/2016/08/DSCN4252-6.jpg");}
body {background-color: #fff;
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
color:#222;
margin:0;
padding:0;
opacity: 1;}
If I understand correctly then as Dylan mentioned above you want to add the CSS of
.content .entry {
background-color: transparent;
}
I just had a quick question in regards to an issue I am trying to solve. I made my top navigation menu's background color transparent and for some reason there is some white background or something behind it so the image does not show through.
The website is http://jobspark.ca/. If someone can figure out what is causing this that would be great. Thank you
in site.css you having the css for body like this.this is why you having background color as white and margin top as 80px...you can this two code as u want to change...if you remove the margin-top css you having nav to the top...
body {
background-attachment: scroll;
background-color: #ffffff;
background-image: none;
background-position: left top;
background-repeat: repeat;
background-size: auto auto;
color: #000000;
}
body {
margin-top: 80px;
}
I have text links that I am trying to use a background image with on rollover (link.gif is transparent, linkhover.gif is the rollover image).
The code I have below is working except the positioning is not.
.navlink {
background:transparent url('graphics/link.gif') center top no-repeat;
height:70px;}
.navlink:hover {
background-image: url('graphics/linkhover.gif');}
Try making the background take up the full size, like this
.navlink {
background: url('graphics/link.gif');
height:70px;
}
.navlink:hover {
background: url('graphics/linkhover.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
Demo
If you have a parent element around .navlink, then you can just put height:100% and remove height:70px; and it will stay proportional. If you want to disregard proportion and just have it fill the parent you can put both height:100% and width:100%
EDIT
Since I found out the navlinks are all <a>: you can't have background-attachment: fixed because it makes the parent's background change instead of the navlink's (for what reason I don't know)
Updated code
.navlink {
text-align:center;
background: url('graphics/link.gif');
background-repeat: no-repeat; /* This applies to :hover as well */
background-position: center; /* This applies to :hover as well */
text-decoration: none; /* To remove the underline */
}
.navlink:hover {
background: url('graphics/linkhover.gif');
}
Updated demo based on the structure of your site which you provided in the comments
Next time when writing your question you should include the relevant HTML, that would have made it much easier to help you with the problem
EDIT 2
After some playing I believe I got your site the way you want it using this:
.navlink {
padding-top:30px;
text-align:center;
background: url('graphics/link.gif');
text-decoration: none;
}
.navlink:hover {
background: url('graphics/linkhover.gif');
background-position: center -55px;
background-repeat:repeat-y;/*This is optional, taking it out makes it repeat*/
text-decoration: none;
}
You should make a sprite, put the images next to each other in one file and adjust the background-position on :hover. The CSS should be like this:
.navlink {
background-image: url('image');
background-position: top left;
}
.navlink:hover {
background-position: top right;
}
You can achieve a cool effect when adding an CSS3 transition.
The image will then slide to the rollover state!
I have the following class
div.application {
background: url(http:/appimages/background.gif) #fff bottom left repeat-x;
height: 20px;
line-height: 10px;
width:80px;
display: block;
text-align:center;
Font-weight:200;
font-size: 10pt;
padding:5px;
}
I use this to build a button like navigation that looks three dimensional.
in all browsers I tested, Chrome, Firefox, IE and different versions this works fine, except for Safari. The image does not appear.
You're missing a "/" in the image url.
Change http:/appimages/background.gif to http://appimages/background.gif and it should work.
The color value (#fff) should also be the first property set in the declaration.
There seems to be two errors in your declaration, the order is wrong and the url is to the image is some sort of mix between absolute and relative.
background: url(http:/appimages/background.gif) #fff bottom left repeat-x;
Should probably be
background: #fff url(appimages/background.gif) repeat-x scroll left bottom;
or if the images is really on another server
background: #fff url(http://www.yourdomain.com/appimages/background.gif) repeat-x scroll left bottom;
Scroll is default and can be omitted..
I can't figure this out..hopefully someone else can.
I have an image button . The hover effect works fine. However, I have the IE broken image icon over the button image.
Lookie here: Funky Image Funky Image Hover
As you can see...they both work except for that annoying broken image.
Here's my CSS:
.donate-btn{
background: transparent url(/custom/img/donate-btn.png) no-repeat;
overflow:hidden;
height:45px;
width:210px;
float:left;
}
.donate-btn:hover{
background: transparent url(/custom/img/donate-btn.png) no-repeat;
height:45px;
width:210px;
background-position: 0 -45px;
}
This simply means you are referencing a non-existent image in the source attribute. You should consider using the actual <button> tag instead. It just needs a few extra style attributes to remove borders and padding:
.donate-btn{
background: transparent url(/custom/img/donate-btn.png) 0 0 no-repeat;
overflow:hidden;
height:45px;
width:210px;
border: none;
padding: 0;
float:left;
}
.donate-btn:hover{
background-position: 0 -45px;
}
I also simplied your CSS by removing some unnecessary styling in the hover state.
<button class="donate-btn" type="submit"></button>