This Wordpress front page uses a child theme.
The parent theme contains CSS:
body {
background: #fff;
}
This front page uses CSS:
body.home {
background-image: url(http://www.fleeceitout.com/images/field.2.jpg) !important;
background-size: cover;
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: fixed;
}
However, the background-image rule is being overridden by the background rule (I believe), and hence, the body of the page does not have a background image.
What CSS do I use to eliminate the background: #fff; rule, so that the body contains a background image?
However, the background-image rule is being overridden by the background rule (I believe), and hence, the body of the page does not have a background image.
You are wrong.
body is less specific than body.home so would get applied first and overridden by body.home.
Even if that wasn't the case, the !important rule would case background-image to be applied last.
Your problem is that http://www.fleeceitout.com/images/field.2.jpg leads to a server that is refusing connections.
If I replace the URL with one that works, you have a second problem (although not one that can be reproduced with the code in your question).
The body element is completely covered up by the div#fullPage element, which has a white background colour. You would have to set that to transparent in order to see the body's background through it.
Related
There are two CSS statements but different sequence order in declaration.
.wrap {
background-color: rgba(255, 255, 255, 0.4);
min-height:600px;
background: url('/images/bg.jpg');
background-size: cover;
max-width: 100%;
}
and
.wrap {
background: url('/images/bg.jpg');
background-size: cover;
max-width: 100%;
background-color: rgba(255, 255, 255, 0.4);
min-height:600px;
}
The difference is just the sequence order of the element between background: url() and background-color, if background: url() is declared after the background-color and there is no image can be loaded, then the background-color cannot become effective. It seems the background: url() override the background-color.
Demo can be found from http://jsfiddle.net/yckelvin/ctgc8xzL/
Is there any definition to the CSS syntax about the element sequence order in declaration? I read the w3schools.com but no such information.
When you use the shortcut background property, any unspecified background properties such as background-color are set to the initial default value.
So if the background property is declared after background-color without specifying
a color, then the background color takes on the initial value of transparent.
This is part of the CSS specification:
http://www.w3.org/TR/css3-background/#the-background
CSS is short for Cascading Style Sheets (emphasis mine). This means that selectors and properties listed later will override selectors/properties that came before.
Think of it as if someone tells you "go left, and then right. Wait; nevermind. Go right, and then right again". You would follow the second set of instructions, rather than the first. CSS works the same way.
So with the following CSS:
div {
color: green;
color: red;
}
The color: red; will be applied, whereas color: green; will be overridden.
Usually, there is no requirement to order certain properties certain ways; you can put width before height or vice versa, and you could put background: url() after background-color. No big deal; the CSS will be applied the same way.
On a slightly different note, there are some selectors that require a particular ordering. That is, a:link, a:visited, a:hover, a:active should be placed in that order to avoid specificity problems.
background is just a short-hand for a multiple of attributes
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
What you want is to set
background-image: url() seperately. or just use the combined one for all your values.
The cascading rules of CSS specify that other things being equal, the latter of two conflicting declarations wins. And here other things are equal, since the declarations for background and background-color appear within the same rule, so they have the same status (same source, same importance, same specificity).
The declarations are in conflict, since they both set the background color. The reason as that the background shorthand property always sets all background properties. When the background color is not specified when using the shorthand, it is set to the initial value, transparent (which, when it takes effect, means that the background of the enclosing element shines through).
Thus, although the first version of the code is valid, too, it is pointless in the sense that the background-color declaration cannot have any effect. The second version sets first all background properties and then overrides the background color with another declaration. This is a possible coding style, though some people may say it is not good style.
The issue does not arise if you set background image using the specific background-image property instead of the shorthand. (A background image may cause that the background color is not seen, if the image fills the entire element area, but that’s a different issue.)
I have a background image applied to BODY tag, with following rules (please, note "negative offset on vertical position"):
body
{
background-image: url("../images/body-bg.png");
background-position: center -85px;
background-repeat: no-repeat;
}
If I add a margin-top on body, like this:
body
{
...
margin-top:40px;
}
Firefox renders it correctly, simply shifting all body content (included background) bottom by 40px.
Chrome seems ignore offset only for background (content is shifted but background remain on top, like if margin-top does not exist)
EDIT AFTER MORE RESEARCHES:
I made some tests and I discovered a strange behaviour.
Wrong offset depends by an eventual background on HTML tag!
Please, look a this jFiddle. If you remove background-color:white; from HTML tag, both browsers will offset (or not) background-image of BODY tag.
Can you explain me why?
I am using blogger and recently inserted this cc code in to the advanced section of the template designer to input a background image
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
}
.body-fauxcolumn-outer div {
background: none !important;
}
The problem is that when the browser window is resized the background stays the same but all the widgets/elements on the page resize along with the window.
See www.ashlylondon.blogspot.com
I need the background to resize along with the widgets so that they stay in the white area on the background image.
You are relying on background resizing so much that your layout won't work without it. That's not ideal. The typical approach to a situation like this would be:
Have a background image that covers the entire screen
Give the <div> element that contains the actual content a background-color: white property.
You can still use background-size to scale your background image to the screen size, but it no longer is necessary for the layout to work.
this woul make sure your content is always readable no matter what; it'll work where background-size won't, e.g. in older browsers and some mobile devices.
add this to your css
body{background-size:100%;}
try this
add in body class background-size:cover;
http://jsfiddle.net/pyFbF/3/
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
background-size:cover;
}
.body-fauxcolumn-outer div {
background: none !important;
}
I'd like to edit some background properties on my Wordpress site.
Using Chrome's Inspect Element I can see that currently I have:
body.custom-background {
background-color: #f6f6f6;
background-image: url('http://patchwood.ca/wp-content/uploads/2013/06/bktopright.png');
background-repeat: repeat;
background-position: top left;
background-attachment: fixed;
I would like to edit background-repeat to no-repeat and background-position to right.
Sounds simple but when I look in the Editor in Wordpress the selector does not exist. It turns out that this styling appears to be within the html on line 53 of the home page.
If it was a handcoded website I would just update the stylesheet but since it's a database driven Wordpress site it's more difficult to know where to edit.
I wonder if there is a means of adding styling to the body element background that overrides any other properties? So basically, if I was to add to the very bottom of the stylesheet the following code to override anything else.
body.custom-background {
background-repeat: no-repeat;
background-position: top right;
}
I did try just adding that but with no success. Any ideas?
its showing up in the header - by the looks of it - its probably a custom background image set in the wordpress backend.
a rather round about way of fixing this can be to add
<style>
body.custom-background {
background-repeat: no-repeat !important;
background-position: top right !important;
}
</style>
to your header or footer
It seems like it's hard-coded, as you suggest. It's located within the <head> tag, which means it's probably part of header.php. Instead of editing style.css, why not look in header.php and change it there (or better yet, delete the reference in <head> and move .custom-background's style information to style.css)?
Edit According to the Codex, custom backgrounds are enabled using the following line in functions.php:
add_theme_support( 'custom-background' );
Removing this line (and then setting your desired background properties in style.css) should do the trick.
i have to manage background in inspect element css this is success css
code:
<style>
body.custom-background {
background-attachment: fixed;
background-color: #F6F6F6;
background-image: url("http://patchwood.ca/wp-content/uploads/2013/06/bktopright.png");
background-position: right center;
background-repeat: repeat-y;
}
</style>
I saw a css code where it was like
body { background: transparent url ('background.jpg') repeat scroll;}
What does the transparent value do? I tried google'ing about this, but no help. Wouldn't background.jpg just override it?
Thank you.
transparent is the color. An element can have both a background image and a background color.
The above is equivalent to:
body {
background-color: transparent;
background-image: url('background.jpg');
background-repeat: repeat;
background-attachment: scroll;
}
The color is important in general if e.g. the background image fails to load, or the image contains transparent regions, or the image does not repeat to fill the entire area (which is admittedly not the case in your example).
However, since transparent is the "initial value", it is never necessary when using the background shorthand, since the shorthand automatically sets all unspecified properties to their initial value.
Thus, the only use case where transparent makes sense as a background color involves:
not using the shorthand, but instead directly using the background-color property;
using it to override another selector applying directly to that element.
An example would be
body.foo { background-color: blue; }
body.foo.bar { background-color: transparent; }
Actually, it is not required.
http://www.w3.org/TR/CSS21/colors.html#background
Given a valid declaration, the 'background' property first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration.
Since background-color's initial value is transparent, it is applied implicitly when setting background:url(...);
More precisely, your style rule is equivalent to
background-color: transparent;
background-image: url(...);
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
in both cases.
However, many authors (including myself) prefer to explicitly set the value
for readability
to prevent any browser bugs, or simply
because they don't know better