The other topics don't seem to solve my case.
My code looks like this:
body {
background: url("th.jpg") initial/cover no-repeat #fff00f;
}
were I to replace initial with let's say top right it would work though initial is a property value of background-position. Were I to type top right/initialit wouldn't work either even though initial is a property value of background-size. No need to say it'd be the same if I wrote alone "initial".
What's the problem? I use the order referenced on: https://www.w3schools.com/cssref/css3_pr_background.asp
Related
I have what I can only assume is a pretty generic CSS queston...
Let us imagine for a moment we have the following:
body{
background-color:blue;
color:white;
padding:2px;
}
Let us also assume we have this as well:
body{
color:white;
background-color:blue;
padding:2px;
}
With all that in mind, is there any particular structure, orientation or proper placement to CSS style elements-with respect to the placement of that element's styles and what line that style should be on?
Put another way, is there any "Standard" that dictates the background color in those two examples must be the first declaration made? Or is the arrangement of element styles completely arbitrary?
I came here to pose this seemingly trivial question to you masters of the CSS world as I am trying to fully understand CSS. It occurs to me, I can not find any documentation that specifically covers CSS syntax-with respect to proper writing form. Also, it seems to me that if CSS stands for Cascading Style Sheet that the styles placed in/on an HTML element would best be served if they were to maintain some sort of consistency with the styling of a page/section/etc all alongside the HTML, right?
Any help you could offer would be greatly appreciated!
There's nothing in CSS that requires the styles in a single declaration to be in any particular order. It makes sense to organize them in some way, and Mature's way is as good as any. (I usually think of it as "create the element, then position it," meaning I reverse his 1 and 2.)
The exception to this is when you specify the same style in more than one way for the same declaration. If you look at mature's item 6, what he's saying is that some browsers won't understand box-shadow and will understand webkit-box-shadow. You should set it up so that browsers that understand both should use box-shadow, and you do that by putting it last. If you have two equally specific declarations, the one that is encountered last will apply. (For more information, see this.)
Only one "standard" is possible in this case (with unambiguous order): You can sort properties alphabetically to help yourself and another have a fast search in.
OR more abstract: The overall logic of the sort "from the General to the local and less important". It is recommended to arrange the properties in the following order:
Position of the element relative to the others:
position, left/right/top/bottom, float, clear, z-index.
Size and padding:
width, height, margin, padding..
Border, it partially refers to the size and can be added to 1-st.
General design: list-style-type, overflow..
Colors, fonts and style design: background, color, font..
The property without prefix is written last.
Example:
first: -webkit-box-shadow:0 0 100px 20px #000;, then:
box-shadow:0 0 100px 20px #000;. This is to ensure that the standard (final) implementation is always more important than the temporary browser implementation.
In css, files are rendered from the bottom up, so whatever is below the other will be implemented. That is the only order based rules I can think of.
However, you can use "!important" to overide an element that is taking precidence lower in your css file. (If both styles have "!important", the lower one once again will take precedence.)
Just let me know if you have any questions.
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
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.
Which css should I apply to textbox that make it same as background means user does not feel like he is typing in textbox? I tried giving same background color but it still doesn't provide exact what I want. User still can feel that it's a textbox.
Do you mean like this?
input {
border: 0;
background: transparent /* the important bit */
}
Live Demo (I added a blue border on a parent element so you can see where the <input> is)
http://jsfiddle.net/eUmr2/1/ (with gradient background to more easily see the transparent)
Appears to work in IE6:
If I understand your question correctly, you should first of all "hide" borders of textarea or input field. You can simply use "border:none;" property for this. In this case, if both backgrounds will be the same (e.g. textarea and rest of the container) it will be displayed like you need.
I don't know exactly what are you trying to achieve, but this method is used usually for not standard designs of form fields. The only you need to do is to be sure that this part of your page is OK from usability point of view.
Good luck!
Remove the borders and apply the same background color as the container it's in.
Normally I try to document the issue here well enough, and duplicate some of the code, so that when the URL that I link to to demonstrate the problem no longer leads anywhere, at least the question will have enough code in it so that someone reading this much later who might have the same problem can see the example. But in this case, the issue I'm having is so specific... I don't know what's wrong, so I don't know what code to duplicate here.
I have a div, with an opacity set to 1, inside another div with an opacity set to .5, to make a really cheap "lightbox" effect. I've done this exact thing at least on two other sites, in the exact same way, and never ran into this problem. In fact if I open up a new HTML page in Dreamweaver and try to duplicate the issue, I can't. I know I must be overlooking something so ridiculously simple, but...
The offending URL in question is http://pmind.com/staging/123/dashboard.shtml
The white box in the middle, generate_window, is inheriting its parent's (generate_window-wash) opacity.
Why?
The parent <div>, including everything inside of it, is transparent.
You cannot have an opaque element inside of a transparent one.
Instead, you can position the opaque <div> above the transparent one, without being a child.
All child nodes of an element with opacity inherit that opacity. That is by design.
You need to re-arrange your HTML so the item is not a child but occupies the same position.
It is not inheriting from its parents..I saw in the firebug it shows the following properties:
#generate_window {
background:none repeat scroll 0 0 #FFFFFF;
height:400px;
margin:200px auto;
opacity:1;
position:relative;
width:500px;
z-index:2000;
}