background:#777777 none repeat scroll 0 0;
the 5 attributes it includes are background-color,background-image,background-repeat,background-attachment and background-position.
My question is:
Are background-repeat,background-attachment and background-position useless if background-image is none?
Because according to the document,these are all used to change background-image.
yes. They have no meaning without that.
You can simply write
background:#777777;
or,
background-color:#777777;
All of those attributes affect the image only.
In general, if a CSS attribute sets multiple values (eg, background, border, font), you don't need to specify all of the values; any values you don't specify will be left at their defaults.
IF you just want a background color, consider using the background-color attribute instead of background.
Related
The shorthand definition of the css background property is as follows:
background: color position/size repeat origin clip attachment image|initial|inherit;
But then i find following examples:
body {
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
So here the order is: color-image-repeat-attachment-position
Is there any reason why this order can change?
Shorthand properties try not to force a specific order for the values of properties, this however works well when those properties have values of different types but not when those properties could have identical values.
Background shorthand property has values of different types so the order of values shouldn't cause errors, however you should stick to the standard order to maintain good readability.
Here's a manual from mozilla's dev center about shorthand properties, the statement that I quoted about the order can be seen under 'Tricky Edge Cases' at point #3.
https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
I have a div element to which I set opacity: 0.7; in the CSS file because I would like the text inside it to be opaque. I display some images inside this div, but the images appear with the inherited opacity property. The result are opaque images.
Is it possible to give a CSS property to the images not to inherit the opacity of the div that contains them? If not, how can I avoid having the images opaque?
Thanks.
If you're using opacity to allow the text to have partial transparency, then simply set the color of the element:
#elemId {
color: rgba(0,0,0,0.7);
}
This lets you avoid adjusting the opacity property, and should work in all browsers that support the opacity property, too.
Only way is with positioning. Here is a great article from CSS Tricks: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
Use position: relative; and a top value to make elements over one another.
If you are just trying to make a background transparent then you can use the rgba() value in your background.
Edit:
Here is a crazy idea. You could use PHP GD to render a image with a gray backround(making transparent) with white text that you want to display in the correct position. Then use a mask-box-image or mask-image CSS property and set it to the rendered image.
If of course your content is not dynamic then you could make the image in Photoshop/whatever program.
Anti-aliasing would not be the same from the browser to the GD render but is the best hack if you do not want to use positioning.
Add the following code in your css
z-index:111
it works.
According to the W3C Recommendation for the CSS background shorthand, the values are [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit.
Following that recommendation, I write a declaration like this:
background: transparent url("/images/layout/sprite.png") repeat-y scroll right top;
When I inspect that element in Firebug, it lists the color part last, instead of first:
background: url("/images/layout/sprite.png") repeat-y scroll right top transparent;
Using it the Firebug way seems to work, but it doesn't follow the W3C Recommendation. I tried some Google searches, but I couldn't find any information on this. Is there some history that I am unaware of? Is it a Firebug bug?
http://www.w3.org/TR/CSS2/about.html#property-defs
A double bar (||) separates two or more options: one or more of them
must occur, in any order.
So, the background values may be listed in any order.
The W3C doesn't define an order in this grammar. Background properties can be listed in any order.
According to this (scroll down to: Background - Shorthand property)
When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this order.
I have often seen stylesheets written where you have something like this:
#anyelement {
background:transparent url(../img/filename.png) no-repeat left top;
}
The value in question is the "transparent" value - what is the benefit of using this value? I have never really used it with my own css files and my PNG images still seem to work fine in all browsers that support PNGs.
Can anybody shed some light on the use of this value??
Thanks!
If you're inheriting a background color from another declaration then that should clear it out.
Unless I’m missing something, using transparent in a background rule doesn’t have any effect.
When you use the background shorthand property, it always sets values for background-color, background-image, background-position and background-repeat. Any values you leave out of the rule will be set to their default values, which for background-color is transparent anyway.
See http://jsfiddle.net/CN2aJ/2/
Some people might prefer their CSS to be more explicit, and thus include transparent in there for clarity. But I don’t think it’ll ever affect how the page is displayed.
The transparent value in this example is the background color (or lack thereof).
The first part of the background attribute is the background color. This is the color that is shown if the background image is not found. Transparent just means that it shouldn't show a background color. Transparent is also the default btw.
I'm specifying a color hex code as the background-color of a really long div. However, i'd like this color to be only repeated horizontally, from left to right, in the first part of the and not go down any further.
Can that be done using background-repeat:repeat-y or is there another method?
Colors have no height...they just exist, without dimensions. If you want a visual distinction between your background color and the rest of the document, you'll need to use a solid image as your background-image:
div.className {
background-image:url("images/background.jpg");
background-position:left top;
background-repeat:repeat-x; // Causes repeat from left-to-right only
}
Do you mean repeating background color or an image? I assume an image becaues repeating a background color makes no sense. And yes this is the correct way:
#mydiv {
background-image: url(images/background.png);
background-repeat: repeat-x;
}
The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all. When the repetition of the image tiles doesn't let them exactly cover the background, the way adjustments are done can be controlled by the author: by default, the last image is clipped, but the different tiles can instead be re-sized, or space can be inserted between the tiles.
http://www.handycss.com/how/how-to-repeat-a-background-image-horizontally-with-css/
You can achieve this without a file when creating an 1px image and put it into your CSS encoded as base64, or by using multiple html elements and positioning. You can not specify a background size for a plain color defined in pure CSS (without using the image trick) at this time.
Also see Is embedding background image data into CSS as Base64 good or bad practice?