This question already has answers here:
What is the difference between background and background-color
(17 answers)
Closed 8 years ago.
What is this best practice to use that's most compatible across multiple browsers:
background:#ffffff;
or
background-color:#ffffff;
or is it best to use both to cover more:
background:#ffffff;
background-color:#ffffff;
There's no difference about compatibility. The only difference is that using background you could add several properties in the same line, as you probably know, instead of repeating background-color, backgroud-image etc in different lines.
To set the color, you can use either of these.
As per W3C Standards, we shall follow the background-color property. However, if you follow this, you will be only able to add color and not other options like size, image, attachment etc.
I would suggest you to go for standard format as it is easy for others to clearly read about the properties.
You can learn more about the background property from:
W3C Schools - Background Property
I prefer background-color. My first reason is readability because in a first glance you can know what's the purpose of that style. When you use plain "background" you can define many properties inside it which makes it more complicated to read.
Background: color position/size repeat origin clip attachment image|initial|inherit;
versus background-color: color|transparent|initial|inherit;
And ie is not fully compatible with all background properties:
Note: IE8 and earlier do not support multiple background images on one
element.
Good luck!!
It doesn't really matter if you use background or background-color since background is a prefix/shortcut to:
-color
-image
-position
-attachment
-repeat
Its just that using background can let you add its additional css properties to prevent repetition of declarations. It is one of the basics of CSS. But if you are only going to change the color of the background and nothing else, I recommend you use background-color.
Related
Is it possible to specify a font style (font color, etc.) so that instead of using a solid color I could:
Have an HTML element on top of another, and make the font transparent, so I can have the text cut through the top element and see the contents of the bottom element through the area of the letters?
Specify text with images (not animated for instance/at least), so I can use textured text instead of solid colors?
Is it possible or not, using any CSS level/version, or HTML5, or some native web browser specification?
Is it possible to detect the area of each letter at least using Canvas, or should it still be done fully manually, or impossible in plain HTML/HTML5/CSS?
I think the first one you are talking about is similar to a clipping mask in Illustrator? If so then there is a background-clip feature that is described here on CSS-Tricks however this is only support in webkit browsers at the moment, I'm not sure about IE10 as this has more added compatibility than other IE versions.
Quickly Google-ing 'Patterned Text with CSS' has shown up this page which explains it.
EDIT---------------
For webkit browsers it is webkit-background-clip and for IE9+ it is just background-clip
If you want to set transparency for text just use:
color: rgba(0, 0, 0, .5);
See more info here http://www.w3schools.com/cssref/css_colors_legal.asp
I don't know if there's a different way of having texturized letters, but you could write a parser for text that will replace letter with image file.
You could try creating a svg mask with the piece of text you want to use, then embed the SVG code directly into the HTML.
This approach should work in most modern browsers.
What's the best practice to create a checkout (tracking) menu like below in CSS.
How to create this menu without images? e.g. With CSS triangles?
You can use the CSS triangles, as described on CSS-Tricks. Then, apply CSS-gradient to your background. Oh, and there is a slight border-radius needs to be applied on the first (and, probably, last) element.
Unfortunately, as far as I know, you cannot apply CSS-gradients to the triangular part, since its background is actually the color of the border.
And, well, the gradients don't work well across all browsers, so you will have to fallback to a plain image for older versions thereof.
UPDATE:
An, of course, as #BoltClock suggests you could use a single sprite image, accompanied by :before or :after pseudo-elements.
Sample sprite image:
This question already has answers here:
Set background image for font color?
(5 answers)
Closed 9 years ago.
Can I make text textured by somehow setting an image as the text color, and having it repeat throughout the text?
Not possible with pure css. See previous post on Textured Text
I don't think that is possible, sorry.
You'd need to make an image.
Though if you could create the text with CSS masks, it will work :)
Yes, you can take a font of your choice and alter it so the outlines are cut out of solid blocks (like the 'oversteer' glyphs of this image instead of the 'unsteady' glyphs). You can embed this custom font into pages using CSS's #font-face, and then it's just a matter of applying a background in the normal way (and ensuring proper line-height, etc.).
my question is a bit tricky and I'm not really sure if it is possible, but I think I have a memory of doing it before or seeing it somewhere.
So, I am making a horisontal menu. I have a div block of size 980x36px. It has a background image:
Inside I have links text) which I made block elements (display: block;) and floated left. So now it would look more like this:
Now I want all active links and all links that are mouse-overed to have a different background, like this:
The problem here is that my background image (on hover) is again 980x36 px and is different in the different horisontal positions just like the first background, blue on the left and red on the right:
So, now when I hover on a link I must set the background position some negative horisontal value, for example for the third link I should set something like background-position: -233px 0px; so the colors of the two backgrounds would fit.
My question is how can this be acomplished automaticaly? Here is the tricky part: I don't know the width of all links since they are text and should support multi-language (so they obviously cannot be pre-made images). I don't want to use PNG (I could easily make a semi-transparent 'glass' which would overlay with the first background and create the same effect) - because of.. guess who, yes IE6. And finally I want this to be done with a nice, clean and widely supported technique, so JavaScript is out of the question (I know it's easy, I can make it, I just don't want to use it).
The thing that is familiar in this situation is the background-attachment: fixed; method. In this case it would be great if I could fix the position of the background of each link to the position of the container div. That would be perfect! Just what I need! Each link will be on it's place, but the background would render as if it was on the container div! Well, that's the problem, if anyone knows a good solution.. If not I should consider the less pain, which in my opinion, currently is to try the PNG way with some IE fixer maybe?
You should just use a .png as you described in your question.
To fix IE6, you should use one of the many available JavaScript-based .png fixes, such as:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
It's just not worth crippling yourself by pandering to the minuscule percentage of users that are using IE6 and have JavaScript disabled.
(yes, I realise the question is old, and you've probably already created your menu)
The quickest solution that comes to my mind is using jQuery to position the background accordingly (you can check each element's position and just change its CSS background position).
For things like menubars and headers, a background color is nice.
But a background color that gracefully transitions from say Blue to White is even nicer.
I know this can be done by making a 1-pixel wide, X-pixel tall image file containing the desired fade and repeating it across the div, but does CSS have native support to just define colors and be done with it?
Can any other language handle this?
With CSS3, you can do that. However, CSS3 is not widely supported through browsers, so only the most recent of browsers (and not even all of them) will be able to display the gradient. Unless you're only interested in working with those browsers that can do it, you're going to have to stick with the 1px background image.
http://www.quirksmode.org/css/contents.html
http://www.w3.org/Style/CSS/current-work#CSS3
You mean a gradient?
Webkit browsers(Chrome and Safari), and apparently FF 3.6 now support CSS gradients:
see this link
According to the article, even IE has some proprietory CSS gradient support, I don't know how well that works though. You should always have a fallback to solid color though.