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/
Related
i need to add an small image to the left and right from a hyperlink. This will be reused several times with different images, so I need to do it in CSS with classes.
I succeeded already to either the left http://jsfiddle.net/XAh2d/9257/
.fuss {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) center left no-repeat; padding-left: 20px;}
or to the right http://jsfiddle.net/k59zhwg3/1/
.fuss {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) center right no-repeat; padding-right: 20px;}
but as soon i try to use two classes for left AND right, it didnt work, only one image shows up: http://jsfiddle.net/7jcqxa3v/10/
.fuss-rechts {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) right no-repeat; padding-right: 20px;}
.fuss-links {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) left no-repeat; padding-left: 20px;}
in HTML: <a class="fuss-links fuss-rechts" target="_blank" href="https://elternwerkstatt.domaincontrol.at">hier mein link</a>
Any help appreciated! Thank you
You can modify your CSS class like this to achieve it:
.fuss {
background: transparent;
background-image: url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png), url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png);
background-position:left,right;
background-repeat: no-repeat, no-repeat;
padding-left:20px;
padding-right:20px;
}
Yes, this is expected behavior. The CSS class fuss-links is overwriting the background rule set by fuss-rechts since it comes 2nd in the stylesheet, since CSS rulesets prioritize rules that come last (hence the C for cascading in CSS).
To my knowledge, you cannot achieve the desired effect using just the CSS background rule, since it does not allow you to repeat elements only on the edges, you can either never repeat or repeat across the entire width (source: https://css-tricks.com/almanac/properties/b/background-repeat/).
My suggestion would be to move the images to <img> tags inside the <a> tag and to use position: absolute; to achieve the effect you want. You can see any example here:
https://jsfiddle.net/7jcqxa3v/22/
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.
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.)
I am using Twitter Bootstrap (ver 2.3.1) to build a website and I am trying to achieve the following:
http://jsfiddle.net/MgcDU/2916/
On that website, I am using a large image as a background to a <section> which streches from the left edge of the screen to the right edge (all the way across).
I would like to place a pagination element on top of that image. With the navigation elements themselves being transparent (so the image below can shine throught) and the space left and right to the pagination element to be set in white color or page background color (it should cover the image, thats all).
I've given the pagination elements transparency:
.pagination li a, .pagination li span {
background: transparent;
}
I simply do not know how to get the white spaces around the pagination.
Can anyone help me out on this, please?!
.pull-right { position: relative; top: 2em; background: #ccc }
http://jsfiddle.net/MgcDU/2917/
Something like this?
i tried to search in google but no one talked about this.
i want a css solution to create a liquid tag box like the orange ones in this :
http://www.mixx.com/stories/10402914/haiti_us_gov_t_grants_matching_3_to_1_donations_to_worldvision_for_haiti
so, even if the word is long the tag box will fit it.
i want the same shape
Thanks
This is a css technique called sliding doors. You can find a good article about it here:
http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx
Mixx uses this technique with just one image. The image is attached to the <li> tag and to the <a> tag. The overlapping of the images makes sure that the arrow is just as long as it is needed.
Mixx uses an ordered list, although an unordered one will do just fine:
<ol class="tag-list">
<li>crisis assistance</li>
<li>earthquake</li>
<li>haiti</li>
<li>haiti</li>
<li>world vision</li>
</ol>
Set your list at the top level so that there are no bullets or other graphics associated with the list items:
ol, ul {
list-style:none outside none;
}
Next, set your list items so that they display horizontally (inline). Mixx have used float: left; but you might also use display: inline;:
ol.tag-list li {
background:url("../images/layout/tag-bg.gif") no-repeat scroll 100% 0 transparent;
float:left;
margin:0 0.8em 0.8em 0;
padding:0 1em 0 0;
}
You'll notice that Mixx has the background for their list items set to this sprite:
(source: mixx.com)
The link within each list item also uses this same sprite, but changes the position of it in CSS (background: ... -19px...):
ol.tag-list li a {
background:url("../images/layout/tag-bg.gif") no-repeat scroll 0 -19px transparent;
color:#955C0F;
display:block;
height:1.4em;
padding:0.15em 0 0.2em 1.2em;
text-decoration:none;
}
This shifts the vertical position of the sprite (which is 38px high) up 19px, effectively showing the arrow-end.
That's essentially all there is to it.