I have used an image as my list style image for creating nice bullet points, however they are not correctly vertically aligned to the list item. I have played around with the margin and padding of the list items, but cannot vertically "correct" them. What do I need to do?
I think you can find your answer here Adjust list style image position?
Position your image with the position properties top, left and then use padding to position them:
li {
background: url(images/bullet.gif) no-repeat left top;
padding: 3px 0px 3px 10px;
margin: 0;
}
Try background:url('image/path') left center no-repeat in css part.
Related
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/
I'm trying to add multiple background-images to a DOM element (a td) using CSS. I can specify multiple background images that stack on top of each other like so:
td{
background-image: url("img1.svg"), url("img2.svg");
}
This results in img2 being stacked on top of img1. However, I need to specify that one background image should be off-center, while the other centered. Is there a way to do this in CSS, or will I need to get fancy to do this?
You just do the same with the position rule:
td{
background-image: url("img1.svg"), url("img2.svg");
background-position: center center, left top; /* or */
background-position: center center, 0px 0px; /* x y */
}
The first apply to the first image, the second to the second image and so forth.
For more details:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
You can use background-position property
background-position: left top, center center;
You can use background shorthand property if you wan't to type less. I really prefer shorthands.
+background-position +background
In application I have a few columns that can contain inline-editable values. For these cells, I want to display a pencil icon:
td.editable
{
padding-right: 20px;
background-image: url(pencil.png);
background-repeat: no-repeat;
background-position: center right;
}
This CSS is almost fine except... I would like to have a 2px space between cells border and image. Is is possible to achieve it with background image and CSS? If not, how can I achieve it?
Thanks
Just re-save your BG image with a 2px transparent border and make the inputs 4px taller to accomodate the new height.
Use the background-position property with x% y%.
http://www.w3schools.com/cssref/pr_background-position.asp
Try this:
table { border-spacing: 2px;}
The simplest way? Add 2 pixels to the right of your pencil.png. You could screw around with background position but not worth the effort.
I have a site design I am working on for a bookkeeping service:
http://digitaldemo.net/vintage/home.html
The overall "look" is supposed to be that of a desk blotter. Everything is rendering correctly across the board, but I am having one problem.
I am trying to get the main content area (the "desk blotter") to overlap the top and bottom borders.
The overall page background is a seamlessly tiling image (the lighter brown / gold) and then the top border is a DIV (#section-head) whose background is a semi-transparent PNG and the bottom border DIV (#section-foot) has the same semi-transparent background as well.
My "desk blotter" is inside a #container DIV that uses the following CSS to overlap the top border:
#container { clear:both ;
width:1002px ;
margin:auto ;
background:url("images/paper-bg.jpg") ;
min-height:600px ;
position:relative ;
top:-40px ;
-webkit-box-shadow: #0e0300 0px 0px 14px;
-moz-box-shadow: #0e0300 0px 0px 14px;
box-shadow: #0e0300 0px 0px 14px;
behavior: url("PIE.htc");
z-index:1000 ;
}
That works all well and good. Problem is that it forces a gap at the bottom of the #container DIV equal to the -40px top positioning.
So two questions:
a. how do I get rid of that gap;
b. how do I get the "desk blotter" to overlap the bottom border as well?
Many thanks!
I am not sure if I understand entirely but to get the blotter to overlap the footer you can add this css:
#section-foot {
position: relative;
top: -80px;
}
From here you may want to add some padding to the top of the footer if you have any additional content there.
This question already has answers here:
Position a CSS background image x pixels from the right?
(21 answers)
Offset a background image from the right using CSS
(17 answers)
Closed 2 years ago.
I want to set a background image for a div, in a way that it is in the upper RIGHT of the div, but with a fixed 10px distance from top and right.
Here is how I would do that if wanted it in the upper LEFT of the div:
background: url(images/img06.gif) no-repeat 10px 10px;
Is there anyway to achieve the same result, but showing the background on the upper RIGHT?
In all modern browsers and IE down even to version 9 you can use a four-value syntax, specified in CSS3:
background-position: right 10px top 10px;
Source: MDN
Use the previously mentioned rule along with a top and right margin:
background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;
Background images only appear within padding, not margins. If adding the margin isn't an option you may have to resort to another div, although I'd recommend you only use that as a last resort to try and keep your markup as lean and sementic as possible.
There are a few ways you can do this.
Do the math yourself, if possible. You already know the dimensions of your image. If you know the dimensions of the div, you can just put the image at (div width - image width - 10, div height - image height - 10).
Use Javascript to do the heavy lifting for you. Pretty much the same method as above, except you don't need to know the dimensions of the div itself. Javascript can tell you.
A more hackish way would be to put a 10px transparent border around the top and right of your image, and set the position to top right.
I don't know if it is possible in pure css, so you can try
background: url(images/img06.gif) no-repeat top right;
and modify your image to incorporate a 10px border on the top and right in a transparent color
You can use percentages:
background: url(...) top 98% no-repeat;
If you know the width of the parent div it should be pretty easy to determine what percentage you need to use.
One solution is to absolutely position an empty div, and give that the background. I don't believe there's a way to do it purely with CSS, no changes to the image, and no extra markup in a fluid layout.
You can fake the space on the right hand side with a border in pixels (white most of the time or maybe something else)
background-image: url(../images/calender.svg) center right
border-right: 5px white solid
The correct format is:
background: url(YourUrl) 0px -50px no-repeat;
Where 0px is the horizontal position and -50px is the vertical position.
CSS background-position accepts negative values.