The CSS below throw out a warning(in chrome it works well): Invalid property value
#commentblock ol li {
background: url(../img/comment-bottom.png) no-repeat scroll left 50px bottom
}
What's wrong in the CSS above? any help please!
update:
I modified the css as below, then it could display the background pic, but it's not what i want?
#commentblock ol li {
background: url(../img/comment-bottom.png) no-repeat scroll left bottom
}
What should I do now? the pic in the red rectangle is #commentblock ol li.
The position can only have two values, one for horizontal and one for vertical. You have three: left 50px bottom. So which two of those three did you mean?
In your question you say you tried removing the 50px, but my guess is you meant to remove the left.
#commentblock ol li {
background: url(../img/comment-bottom.png) no-repeat scroll 50px bottom
}
(Can't illustrate with a fiddle, sorry, since I don't have your graphics.)
Related
I have a form with a a select box that has a custom drop down arrow, put in place with the background property in my CSS. Right now it's positioned to the right, but that means it butts up right against the side of my box - is there some way I get get the arrow to "see" the padding to the right of it?
CSS:
select {
background: url(images/contact/downarrow.svg) no-repeat right #f3f3f3;
}
RESULT:
Or you can try to use a <img src="images/contact/downarrow.svg" />
with float: right;
And it will be nicely positioned to the right and will follow the Padding rules at your Tab area.
Good luck.
For others:
if you use something like
background: url(images/contact/downarrow.svg) no-repeat 250px #f3f3f3;
that's going to (sensibly) just stick it 250px over, and when you resize the window it'll eventually be covered over by the shrinking screen size. To prevent this, replace those pixel values with percentages. Eg:
background: url(images/contact/downarrow.svg) no-repeat 96% #f3f3f3;
In Wordpress I have this kind of structure in my primary menu:
#menu-primary .sub-menu {
background:url('images/submenu_background_top.png') no-repeat 0 0;
width:159px;
padding-bottom:6px;
}
The image submenu_background_top.png is at the top of .submenu-element which is a an ul.
I want to align another background at the top of the .submenu - element (which is 6px high (therefore the padding-bottom:6px))
In "normal cases" I could put in an absoletely positioned element at the bottom of the .submenu element and put an image in there, but I don't want to change the html (for primary menu) of the theme I'm using.
I looked at css3 multiple images, but I understand I could use right, main, left -image separated by a comma, but I would rather like topimage, bottomimage separated by a comma - I couldn't see the ability to achieve that in css3. I have no problems using css3 because it's easy to create an image-fallback.
#menu-primary .sub-menu {
background:url('images/submenu_background_top.png') no-repeat 0 0;
width:159px;
/* How to put a bottom image here that is 6px high? (but still have image above in this element) */
padding-bottom:6px;
}
You have to comma-separate your background values for the different images, like this:
background-image: url('images/submenu_background_top.png'), url('images/submenu_background_bottom.png');
background-position: top left, bottom left;
background-repeat: no-repeat;
JSFiddle: http://jsfiddle.net/Z5c8n/
So here is the website: a link
When you make your screen smaller and scroll horizontally... you will see my issue where everything within the "wrapper" gets cut off and then there is a whole bunch of extra blank space on the right... I'm pretty sure it's in the wrapper, but I'm not sure how to get this wrapper to stay still and not get cut off when the screen is minimized.
ANy help on this issue would be greatly appreciated... Thanks!
You should try to place your wave background image inside the footer class instead in an ul tag. Your footer id is already set to be 100% witdh so it should fill out the complete bottom of the page.
#footer {
height:275px;
width:100%;
margin: 0 auto;
margin-bottom:0;
background: #000 url(http://dropbuckets.com/wp-content/themes/Freshman%20101/images/waves.png) repeat-x 0 top;
}
Make sure the white in your wave png is not transparent.
You need to set a min-width on your body to that of the largest element on your page. In this case #access was 940px:
body {
background: none repeat scroll 0 0 #F1F1F1;
min-width: 940px; /* add this */
}
The site is appearing fine in Mozilla, Chrome, and IE6. But IE7 onwards, the menu background image was not appearing at all.
In the file moo.menu.css, I made the following changes in li:
.ry-cssmnu ul li {
margin: 0; /* all list items */
padding: 0;
float: left;
display: block;
background: url(../images/mainnav-bg.gif) repeat-x center top blue;/*added this line*/
cursor: pointer;}
After this, the background repeat is appearing only where the menu text is present.
http://bit.ly/ie8issue
The site is at: www.agmrcet.com/cons
Thanks in advance.
You have to declare a height to that container. Your floating list items are not giving their parent container height because float removes them from the document flow. Your <ul> has a current height of nothing, and the background image won't remedy that.
#mainnav { height:44px; ... }
First of all, I would change the CSS background property according to the CSS syntax:
background: blue url(../images/mainnav-bg.gif) repeat-x center top;
Looks like the problem is with your
<div class="clearfix" id="mainnav">
tag. Have you tried adding a pink border or something (to debug it) to the mainnav element and then setting a fixed width on it to make sure it goes the full width?
I have an image with rounded corners(png transparent on the corners), about 150px wide, and 25px height, so i'm trying to use it, but it doesn't work for me:
<button><span>Click me</span></button>
And the css:
button{
border:0;
background:url(../images/button.png) no-repeat top left;
height:24px;
padding-left:10px;
}
And
button span{
display:block;
background:transparent url(../images/button.png) no-repeat top right;
height:24px;
padding-right:10px;
}
But it doesn't work correctly, the right corner isn't displayed correctly.Any help?
Best Regards,
Using Firebug (use it!) it is clear what is happening. Your right corner shows, but as the the button underneath it continues, you simply don´t see it.
You can solve that using two images, a small one (not so wide, minimum width the padding on the left side) for the left corner and a very wide one for the right corner. That way your buttons don´t overlap and you get the desired effect.
First things first: How is it displayed?
You're using the same background images for both left and right corner. Is that in order? (I realize that technically it could be) Also, you might want to try and switch the two (left/right), as span is not a block element, and that might be causing your problems (much in the same way that you can't, say, set a width to a span, unless you also set it to render as a block)
your span and button elements have the same height (which is smaller than image height by the way). Another observation: why do you need span element at all?
start with the simplest way to do something:
<button>Click me!</button>
button {
border: 1px solid #ff0;
padding: 10px;
display:block;
background:transparent url(../images/button.png) no-repeat top centre;
height:25px;
}
this should display your image. Use border property to debug CSS