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>
Related
I have tried to implement the following code but nothing happens
#masthead {
background: url('data05/mono/public_html/wp/wp-
content/themes/spacious/images/monostaff1024x512.png') no-repeat center;
background-size: cover;
}
I am having no luck. IS my file to path format incorrect?
There is a space in your url after the "wp-"
data05/mono/public_html/wp/wp-
content/themes/spacious/images/monostaff1024x512.png
Also the formatting seems off, see background property.
I have a thymeleaf template where I don't have CSS files imported and wanted to declare style attribute for the body element with background-image: url{/image.jpg} property with relative image URL. I wanted to load the URL without including the application context name(/myapp/) it. It is similar to the problem over here, except it din't work for me.
CSS:
<style>
body {
background: url(../img/Background.jpg)
no-repeat center center fixed;
background-size: cover;
}
</style>
But the above CSS doesn't work and it accessed the image at
http://localhost/img/Background.jpg.
So, I had to give the value as url(/myapp/img/Background.jpg) for the image to load properly.
I have the mvc:resources configuration properly set in spring-context.xml for /img/ request to load properly and it works in other places.
spring-context.xml
<mvc:resources mapping="img/**" location="/WEB-INF/img/" />
So how to load the background url image css value dynamically using thymeleaf's relative url?
So, here's how to set dynamic relative paths in background image url property in the css using thymeleaf's inline text value,
<style th:inline="text">
body{
background: url{[[#{/img/Background.jpg}]]}
no-repeat center center fixed;
}
</style>
which loads the image using relative path and we don't have to specific the 'myapp' context name in the url.
In my case that helped:
change brackets from curly to round
<style th:inline="text">
body{
background: url([[#{/img/Background.jpg}]])
no-repeat center center fixed;
}
</style>
An alternative is:
<body th:style="'background: url(/img/la-paz-city.jpg) no-repeat center center fixed;'">
...
</body>
that is all 😉
<body th:style="'background-image:url(' + #{/images/background.jpg} + '); background-repeat: no-repeat, repeat; background-size: cover;'">
</body>
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.
I'm creating a theme for a drupal site, it is very basic so far. The folder structure of the theme is like so:
theme-folder
-->css
-->style.css
-->images
-->first_page_slideshow.png
--drupal files--
The css for the region in question:
.content-header {
background-image: url ('../images/first_page_slideshow.png');
background-repeat: no-repeat;
background-position: left top;
width: 1024px;
height: 380px;
}
Yet I the image fails to load as a background. Google developer tools reveals that it is an "Invalid Property Value" on the background-image: css tag.
Any help would be appreciated.
This
background-image: url ('../images/first_page_slideshow.png');
becomes
background-image: url('../images/first_page_slideshow.png');
Just a space between url and the parenthesis.
A simple proof: http://jsfiddle.net/suLNk/
I have 'tr' with background-image and on 'th' I want to show a image on its right corner to indiect if this column is sorted. I have css style like following:
tr.header {
background-image: url(../Images/bg.gif);
background-repeat: repeat-x;
}
th.sort {
background-repeat: no-repeat;
background-position: center right;
background-image: url(../Images/sort_bg.gif);
}
This works well on IE8 and firefox3, but not on IE7.
Anyone has any idea of how to make it working on IE7?
Try adding this doctype to the top of your page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
are both classes not working or just one of the classes not working?
.header { background: url(../Images/bg.gif) repeat-x; }
.sort { background: url(../Images/sort_bg.gif) no-repeat right; } /* should default to middle */
...
This is way old, however it comes up at the top of google when you search for 'th background image css', so it's worth getting an answer in here.
I think you are out of luck with multiple bg images on a single element in IE7:
http://www.w3schools.com/cssref/pr_background-image.asp
"Note: IE8 and earlier do not support multiple background images on one element."
not sure why it was workng for you in IE8 at all.
If I actually come up with a solution I'll post it.