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.
Related
I am having trouble understanding how to troubleshooting why my browsers(google chrome and safari) are ignoring the background image. I can see the url built correctly in the dev tools, however it is struck out (the important override still fails here too). Here is my code:
body {
background-image: image-url('blue.jpg') no-repeat center center fixed
}
the image is stored in app/assets/images.
As always, any help is greatly appreciated.
try removing image-url and just using url
body {
background-image: url('blue.jpg') no-repeat center center fixed
}
I ended up setting the image as a background instead of a background-image:
body {
background: asset_url('blue.jpg') no-repeat center center fixed;
color: ...
margin: ...
padding: ...
}
I do not understand why this works however.
I am using a div tag and I am applying css to it.
Please find below the div tag
<div class="testcss">
</div>
My css class is as follows
.testcss
{
background-image: url('images/imag2.gif');
background-repeat: repeat-y;
background-position: bottom-left;
padding-left: 10px;
padding-right: 10px;
}
The div is showing background image and displaying properly in Mozilla other browsers but it is not working in IE8 and IE9.
Even it is working fine in IE10.
There is some issue with background-repeat: repeat-y not working properly in IE8 and IE9.
Is there some way that we can fix this in IE8 and IE9.
Any help would be greatly appreciated.
Thanks in Advance.
Regards,
Rahul Rathi
I believe your syntax is wrong, and no.. it should work in IE8 and IE9 ... try:
.testcss {
background: url('images/imag2.gif') bottom left repeat-y;
padding-left: 10px;
padding-right: 10px;
}
http://jsfiddle.net/feitla/85XFu/
PS - tested in IE9... background repeated just fine. Make sure your div actually has a set height/width if it is empty.
I agree with #feitla on the fact that your syntax is wrong. You can't use bottom-left as it doesn't exist in the background property for CSS.
I also agree that you should simply use background: url('images/imag2.gif') left repeat-y as the bottom is not needed because it's already repeating in the Y axis and spanning all the height of the container.
Last but not least, you do have to set a width and a height to your element if it's empty (as in with no other markup) because otherwise you would only be able to see 20 pixels in width because of your padding left and right.
I think that the lesson to take from this is that it's safer to use shorthand styles as it makes your code cleaner and easier to read.
You would end up with:
HTML
<div class="testcss"></div>
CSS
.testcss {
background: url('images/imag2.gif') repeat-y left;
padding: 0 10px;
}
Read more about how to use shorthand code as it makes writing CSS a lot cleaner and more fun... and it's not as hard as it may seem, here's a link to this specific issue and shorthand css for background.
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 created a webpage that uses two images as a background - one for the top and one for the bottom. Chrome, Safari and Firefox display the page without issue but, in IE the background at the bottom doesn't show. Here is the code I'm using:
html {
font:100%;
background:url(../images/test8-300.jpg) repeat-x, url(../images/Html-background-Bottom2.png) no-repeat bottom;
background-color:#d7d7d7;
}
If you need to have a look to understand better, this is the address: doggiestime.co.uk. At the bottom, you should be able to see some dogs.
Try
background:#fff repeat-x no-repeat bottom;
background-image:url(../images/test8-300.jpg), url(../images/Html-background-Bottom2.png);
you need to set your background image to the <body> tag not <html>
body {
font:100%;
background:url(../images/test8-300.jpg) repeat-x, url(../images/Html-background-Bottom2.png) no-repeat bottom;
background-color:#d7d7d7;
}
I have a webpage where I want to show the background image # the bottom right corner of the page. For this I have the following code:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:bottom right;
}
This code works fine in IE. But in FireFox, the image is shown at the 'top' right.
Please suggest.
Regards
- Ashish
html, body { height:100%; }
body {
background:url(img_tree.png) no-repeat bottom right;
}
I think it's just that your page isnt taking up the full viewport height, which the 100% height on body/html does.
I usually just use
background: url(img_tree.png) right bottom no-repeat;
This works fine in IE and firefox