I have a vertical menu with a background. I need to shift the background to the right and in the center from top but an unable to do this. http://www.tiikoni.com/tis/view/?id=b0b07d2
ul.nav
{
margin:0; background-position:center; background-image: url(../images/nav_bg.gif);font-family: "Century Gothic"; height:40px; padding-left:30px;
}
ul.nav a{
height:19px;color:white;display:inline-block;font-family:Century Gothic,Arial;font- size:14px;padding:8px 20px 0 ;text-decoration:none !important;vertical-align:middle;
}
ul.nav a:hover
{
color:white;display:inline-block;font-family:Century Gothic,Arial;font-size:14px;height:19px;background-image: url(../images/nav_over.gif);
background-position: center top;background-repeat: no-repeat;text-decoration:none !important;vertical-align:middle;
}
* html ul.nav a
{
color:white;display:inline-block;font-family:Century Gothic,Arial;font-size:14px;height:19px;text-decoration:none !important;vertical-align:middle;
}
ul.nav a.highlight{
color:white;display:inline-block;font-family:Century Gothic,Arial;font-size:14px;height:19px;text-decoration:none !important;vertical-align:middle;
}
ul.nav li{
display: inline;
color:#FFF;
background-image: url(../images/white_dotline.gif);
background-repeat: no-repeat;
background-position:right center;
font-size:14px;
padding:8px 1px;
font-family:"Century Gothic";
height:19px;
[height:19px;
height:20px;]/*Google Chrome, Opera and newer Safary 4+*/
}
The horizontal and vertical position is controlled by the background-position property. The first number defines the horizontal position and the second the vertical position.
Words can be used for horizontal such as left, right and center and for vertical it is top, bottom and center. Absolute positions can be used also, such as pixels or ems, as well as percentages.
For example:
background-position: right top; /* positioned to the right and the top */
background-position: 100% 0; /* positioned 100% to the right and zero from the top (the same as above) */
background-position: 50px 200px; /* positioned 50px from the left and 100px from the top */
You have specified a single value for the background position, which means that it's used for horisontal positioning, and the vertical positioning is set to 50%. You should specify two values to control both positions. Example:
background-position: left center;
Related
Can I somehow apply negative margin left and right for 5px on this background css?
background: url("/wp-content/themes/custom-1/images/shadows.jpg") repeat-x center bottom;
You can make negative margin on the element:
.box {
background: url("/wp-content/themes/custom-1/images/shadows.jpg") repeat-x center bottom;
width: 100%;
height:200px;
background-size:cover;
position:relative;
margin: 0 -5px;
}
If this doesn't help you please provide us html and css for the element and his parent.
I am making a menu with 2 items per line and I want them to have a background-image and on hover the image will change to other. I was able to do it in chrome, using content in CSS, but Firefox and IE don't support this. Thus it should be made with background-image. The problem of this is that with content I can specify that the buttons will have 35% of the width and height of the left side while making this with background-image is impossible, I need to say specifically that they will have px of height and that will not make it resize when I resize the window. When I resize the window the left side resizes thus what's inside of it resizes automatically because I defined 35% of it. Here is an example code of how I made it (works in chrome, not in firefox and IE). Can someone help me doing this with background-image and still resize the buttons when I resize the window?
https://jsfiddle.net/37qbtwak/
ul.sidebar-menu li a span {
width:35%;
height:35%;
border:1px solid;
}
ul.sidebar-menu li a span#menu_sensor {
content: url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png');
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
}
With background-image I have to do it like this:
ul.sidebar-menu li a span#menu_sensor {
content: url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height:100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
}
Best Regards
That is not a valid use of the content property, which is only intended to be used on pseudo elements.
If you set the display property of your spans to inline-block, you can set a height relative to the width using the padding property. Then set the background-size property to contain and center your image(s).
ul.sidebar-menu{
list-style:none;
margin:0;
padding:0;
}
ul.sidebar-menu li{
margin:0 0 50px;
}
ul.sidebar-menu li.sub-menu{
line-height:15px;
}
ul.sidebar-menu li.sub-menu a{
color:#aeb2b7;
margin-bottom:0 20px 30px 10px;
outline:none;
text-decoration:none;
transition:all .3s ease;
}
ul.sidebar-menu a span {
border:1px solid;
display:inline-block;
padding:0 0 12.25%;
width:35%;
}
#menu_sensor{
background:url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png') center center no-repeat;
background-size:contain;
}
#menu_sensor:hover,#menu_sensor:focus{
background-image:url('http://www.webyposicionamientoseo.com/base/ui/images/blog/27-google-hummingbird.jpg');
color:#fff;
}
<ul class="sidebar-menu" id="nav-accordion">
<li class="sub-menu">
<span id="menu_sensor"></span>
</li>
</ul>
I'd like to have a thin "shadow" line between my DIVs, as separator. Since I'd like the shadow line to be thiner and with more opacity at the top and at the bottom, I have created 3 images: middle shadow, top shadow and bottom shadow. Problem: I don't know how to place the "top shadow" image at the top of "middle shadow" and "bottom" shadow at the bottom (without multiple DIVs). I'm attaching an image done in fireworks where you can see and example of the shadow line.Many tks
div#content-center {
overflow: hidden;
background: khaki;
background: transparent url('images/middle_shadow.png') repeat-y top left;
padding: 0px 0px 0px 50px;
}
You also might be abel to do this with the :before and :after psedo-elements. Read up on them here if you aren't familiar.
#content-center{
background: url('images/shadow_repeat.png') center right repeat-y;
}
#content-center:before,
#content-center:after{
content:'';
display:inline-block;
position: absolute;
background-repeat: none;
/*size these to be what you need*/
height:100px;
width:100px;
}
#content-center:before{
top:0;
background-image: url('images/shadow_top.png');
}
#content-center:after{
bottom:0;
background-image:url('images/shadow_bottom.png');
}
Give multiple backgrounds:
background: url('images/middle_shadow.png') top left, url('images/middle_shadow2.png') center left,url('images/middle_shadow3.png') repeat-y bottom left;
I am trying to make a cool background effect (with alpha transparency and rounded corners) for a drop-down menu with a single CSS entry.
I have a top cap (180 x 4 px), a bottom cap (180 x 20px) and a repeating middle (180 x 2px).
Here is my existing relevant CSS:
background-image: url('images/drop_top.png'), url('images/drop_bottom.png'), url('images/drop_middle.png');
background-position:left top, left bottom, 0px 10px;
background-repeat:no-repeat, no-repeat, repeat-y;
The problem is that the middle section which needs to be expandable/tilable is repeating all the way under the top and bottom caps--such that my rounded corners are now square because they have the repeating middle under them.
Is there some way to prevent the multiple backgrounds from overlapping??
Thanks in advance!
Background-origin and/or background-clip should do the trick. Just set top & bottom borders equal to the height of your cap graphics, then set drop_middle to background-clip:padding-box
EDIT: Here is a complete solution, but for a horizontal orientation:
http://jsfiddle.net/nGSba/
#box
{
display: inline-block;
margin: 1em;
padding: 9px;
border-left:9px solid transparent;
border-right:9px solid transparent;
background-image: url(http://s11.postimage.org/ufpdknvjz/left.png),
url(http://s11.postimage.org/6ng294tj3/right.png),
url(http://www.css3.info/wp-content/themes/new_css3/img/main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top;
background-origin: border-box,border-box,padding-box;
background-clip: border-box,border-box,padding-box;
}
What got me stuck was the transparent on the border-color. The background will always go under the border, so if your border is solid the background will still be invisible.
Whatever your element is that you are applying the images to, try doing the following (I'll assume div for sake of illustration):
div {
background-image: url('images/drop_top.png'), url('images/drop_bottom.png');
background-position:left top, left bottom;
background-repeat:no-repeat, no-repeat;
position: relative;
}
div:after {
position: absolute;
top: 10px ; /* whatever your top image height is */
bottom: 10px; /* whatever your bottom image height is */
left: 0;
right: 0;
z-index: -1;
background-image: url('images/drop_middle.png');
background-position: left top;
background-repeat: repeat-y;
}
I have a #container element, that i have a background issue with:
html {
font-family: Arial, sans-serif;
height:100%;
}
body{
margin: 0 auto;
padding: 0;
font-size: 12px;
height:100%;
background:url(/_images/body-bg.jpg) top center no-repeat;
/*background:#0068b3;
background: -webkit-gradient(linear, left top, left bottom, from(#bfd9ed), to(#0068b3));
background: -moz-linear-gradient(top, #bfd9ed, #0068b3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfd9ed', endColorstr='#0068b3')*/
}
#container {
width:995px;
margin: 0 auto;
padding: 0;
height:100%;
position:relative;
}
When i add a background image to #container, and the page has content that requires scrolling, the background image only displays the amount of the window height, and when you scroll the background image does not display...
Why would that be?
To the image not scroll with the div, I must set it as fixed:
#container {
background:url('img.png') top left no-repeat;
background-attachment:fixed; //this will avoid scroll
}
In order to make the stretch the image to the size of the div, you can use background-size: 100%;, but this is a css3 property, and will not work in older browsers (IE8-)
If container will have a fixed width, just make a image with same width. Else, you'll have to implement a javascript solution to resize it accordingly.
You have no-repeat on the background CSS property of body.
Change to repeat or repeat-y to only repeat vertically.