I have this CSS:
.add-to-cart .button {
background: url("pic.gif") no-repeat scroll left top transparent !important;
height:37px !important;
width:171px;
}
This should set the pic.gif image for a button with class button inside a div with class add-to-cart no matter what was done before. This works in Chrome, FF and Opera, but not in IE9. Any ideas whats wrong with that one?
Thanks!
try removing transparent from
background: url("pic.gif") no-repeat scroll left top transparent !important;
Related
I have to do the following:
The top of the div is an image of a gradient, then in the bottom it continues as a solid color. Can I do this with simple CSS? I know the following is invalid.
{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;
Note: the first 225px, which the image fills, should be without the background-color
As far as I know, you need to use a gradient for the solid color, so that you can set it correctly.
The CSS would be:
.imgbg {
width:255px;
height:355px;
background: url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8);
background-position: 0px 0px, 0px 112px;
background-repeat: no-repeat, no-repeat;
background-size: 255px 112px, 255px 233px;
}
Here is your updated fiddle
Basic suport should be fine for browsers supporting multiple backgrounds, the only problem would be with IE <= 8. Gradient background could be a problem with IE9, but I think that it should work (I can not test IE9). If it would be really a problem, see colozilla for a fix.
Check out this fiddle and tell me if this is what you want.
FIDDLE
HTML
<div class="imgbg"></div>
CSS
.imgbg {
width:255px;
height:355px;
background:#f7d8e8 url('http://placehold.it/255x255') no-repeat;
}
I would do the following:
#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }
This will just put your background image on the top of the div; the rest of it, will be the color you selected for the entire background of the div.
I've a webpage with a background image that needs to be kept sharp and in focus.
The problem is that to achieve that it obviously has to have a set size every time.
I need a way of filling in the remaining space (which will vary from screen size to screen size) with black.
The easiest way to see what i'm talking about is if you go to the webpage: (no self promotion meant)
http://hopeish.com
Particularly if you are using chrome and firefox - as safari is okay and IE isn't being affected in the same way
Any ideas how I can do this??
background: url(image.jpg) #000 no-repeat;
background:#000 url(image.jpg) bottom right no-repeat;
this way your picture will be at the bottom right and the rest will be filled with black.
You currently have:
body {
background: url(image.jpg);
background-repeat: no-repeat;
/*background-attachment:fixed;*/
}
Add background-color: black; to have a full black background.
body {
background-color: black;
background: url(image.jpg);
background-repeat: no-repeat;
/*background-attachment:fixed;*/
}
Or use the shorthand background property variant seen in the other answers.
http://reference.sitepoint.com/css/background
Achievable with simple CSS.
body {
background: url('http://hopeish.com/image.jpg') no-repeat top right black;
}
Here's a live example
first time posting - I hope somebody can help.
I have a gradient background on a page which uses ajax (and becomes quite long after the call).
In IE (version 9) the gradient background stays the same when I scroll down, however in Firefox (version 6) the gradient is correct for one normal page length, but when I scroll down the background gradient repeats itself.
Is there any way I can get firefox to do the same as IE (stay the same no matter how far I scroll?
Here is my css relating to the gradient:
html {
background-color: #8c827a;
height: 100%;
margin: 0 0 1px;
padding: 15px;
/* Mozilla: */
background: -moz-linear-gradient(top, #8c827a, #2B2825);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#8c827a), to(#2B2825));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#8c827a', EndColorStr='#2B2825', GradientType=0);
}
To make other browsers behave the same as Internet Explorer, you can make the background fixed:
html {
background-attachment: fixed
}
Make sure you place background-attachment after the two background declarations.
Add this CSS:
background-attachment: fixed;
This property "pins" the background at the browser viewport.
In CSS declaration for a selector is given as:
background-attachment: scroll;
background-color: transparent;
background-image: url(/images/ucc/green/btn-part2.gif);
background-repeat: no-repeat;
background-position: right top;
I want to optimize the code and change it to:
background: scroll transparent url(/images/ucc/green/btn-part2.gif) no-repeat right top;
My question is, Is this correct way and does it work in IE7/8, Firefox, Safari?
Yes it works. Take a look at point 6 here - http://www.domedia.org/oveklykken/css-shorthands.php
http://www.w3schools.com/css/css_background.asp
When using the shorthand property the
order of the property values are:
* background-color
* background-image
* background-repeat
* background-attachment
* background-position
background
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll right top;
}
Yes, this is the correct way and it works in all major browsers. You can read more about the CSS background property which can be used to set all background-* properties together.
Update: Yes, the following rule will work:
background
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}
Except the browser will attempt to apply this rule to an <background> element in the DOM. And since there's no such element in HTML, the rule will never be applied to anything. :-) So you have to change the rule selector to select the container element you want to apply the background property to:
div#myDivIWantToSetBackgroundTo
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}
Btw, you can play with various values for the background property on the W3School site.
Snippet of my CSS:
#wrapper div.box {
background: url('box-bg.png') left top repeat-y;
}
#wrapper div.box h2 {
background: url('box-top.png') left top no-repeat;
}
That doesn't work. Instead of a transparent image it displays the image but with white space in place of transparent background.
If I do:
<img src="box-top.png" alt="" />
The transparent image shows up correctly. What's casuing this problem?
Have you tried explicitly giving the elements a "background-color: transparent"?
I agree with Pekka - Is it possible those HTML elements are inheriting a white background color from another CSS rule? You may want to try:
#wrapper div.box {
background: transparent url('box-bg.png') left top repeat-y;
}
#wrapper div.box h2 {
background: transparent url('box-top.png') left top no-repeat;
}
May I ask what browser you are using? IE6 doesn't display PNGs correctly. Also, how are you creating your PNG? If it's Photoshop, make sure you do a Save as Web... or it will not display correctly (transparency issue).