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..
Related
Very weird issue. The nav-bar background image is loading fine in all browsers except for Safari.
http://lapalomafunrun.com/
Here is the code I'm using:
#navbar {
width: 100%;
height: 53px;
margin-top: -10px;
position:relative;
z-index:1;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top / 100% 63px transparent !important;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent\9 !important;
}
The CSS 3 background shorthand isn't supported in Safari 6.02 (which I'll assume you're using since it isn't working). You can use the CSS 2.1 background shorthand syntax but will need to remove the background-size property to its own declaration:
#navbar {
width: 100%;
height: 53px;
margin-top: -10px;
position:relative;
z-index:1;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent !important;
background-size: 100% 63px;
}
I was just having the issue where I couldn't apply a background-image property to the <main> element in Safari. Come to find that Safari (currently) doesn't recognize <main> as a block element, as can happen with many of the implementations of HTML5, so setting <main> to display:block did the trick for me. Hopefully that helps.
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!
Am I missing something?
body {
margin: 0 auto;
padding: 0;
font-family: helvetica, sans-serif, Arial;
color: #333333;
font-size: 13px;
background: white url(images/bg.jpg) no-repeat fixed top center;
}
in SearchAndShare.css there is a body {background-attachment: inherit;} rule which, because this sheet is being called later than your main sheet, is overruling the "fixed" from your main sheet
removing that rule fixes Firefox, not sure if inherit is a valid call for a background-attachment but even if it is it would mean you would need to be setting background-attachment: fixed" on thehtmlelement so thebody` has something to inherit from
Update: Yes, if you don't want to mess with the plugin SearchAndShare.css file, adding html {background-attachment: fixed} to your main sheet also fixes it
When using the shorthand background property, the order of the properties should be
color
image
repeat
attachment
position
Try changing the style as follows (change the repeat order and add the attachment and see if it makes a difference:
background: white url(images/bg.jpg) no-repeat fixed center 0;
Then remove the background-attachment:fixed;
EDIT: Apparently mixing keywords and values will cause some browsers to choke. So centre 0 might be the issue in FF.
Try 50% 50% or center center
Try using this
background: url(under.gif) no-repeat fixed 10% 20%;
or
width: 780px;
font-family: Arial;
font-size: 0.8em;
background: url(images/bg.jpg) top left repeat-y;
border: 1px solid #e6930f
Hope this helpz...:)
The CSS -
#header {
overflow: hidden;
background: url(images/header-bg.png) top repeat-x #FFFFFF;
position: relative;
border: none;
display: block;
height: 125px;
width:100%;
}
The HTML -
<div id="header">
<img src="images/logo.png" alt="" />
</div>
This works good in Firefox -
But not in Chrome :( -
The image isn't being stretched vertically in Chrome.
Help!
Just a note, I'm on Linux.
Edit : The background image (50x112px) -
Check it out here - http://movie-buffs.info/
So chrome was automatically taking up background-size from another css file.
When I put
background-size: auto auto !important;
in #header,
the issue was gone.
Thanks everyone for help.
The shorthand you are using for background, is placing the color #FFFFFF in the last argument, it's supposed to be in the first. Try getting rid of the shorthand, so your code will look like this:
/* background: url(images/header-bg.png) top repeat-x #FFFFFF; */
background-image: url(images/header-bg.png);
background-repeat: repeat-x;
background-color: #fff;
background-position: top;
Shorthand order:
background-color, background-image, background-repeat, background-attachment, background-position
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>