I have a menu bar, and I am trying to attach two images to it
This is what I did-
background:url('images/bgs/bg_container_top_left.png') no-repeat top left ,url('images/bgs/bg_container_top_center.png') no-repeat top right;
How can I assign different properties to different images attached here?
Like if I want to give margin to first image
margin-left:-10px;
and to second image
margin-left:-5px;
if you want to position the images than change theses propertites
example:
background:url('images/bgs/bg_container_top_left.png') no-repeat top -10px ,url('images/bgs/bg_container_top_center.png') no-repeat top -5px;
or use background-position: 0px 0px 0px 10px;.
Try this
div{background: url('http://blog.agilebits.com/wp-content/uploads/2012/05/time-machine-icon.png') -5px top no-repeat, url('http://aux3.iconpedia.net/uploads/69290979.png') -10px top no-repeat ; }
DEMO
CSS3 allows for multiple background images to be used. The format used is what you have shown in your first part.
background: url('images/bgs/bg_container_top_left.png') left top no-repeat,
url('images/bgs/bg_container_top_center.png') right top no-repeat;
Rather than using margin, which I have a suspicion may not work (you can test it yourself if you like), I would suggest using the background-position property (https://developer.mozilla.org/en/docs/CSS/background-position) to adjust the starting position for each background. If the actual margin for each element is different, you may want to think of creating separate elements for each background. You could try using this code:
margin-left: -10px, -5px;
This follows the same format (listing background property value 1 first, and value 2 second), but I'm not sure if this is supported.
Related
on my site I have
body{
background-image: url(http://placeholder/aaa.png), url(http://placeholder/bbb.png);
}
which allows me to have one background image overlaying another.
aaa.png is a smaller image being placed in the center over bbb.png
I want to apply a box-shadow to the top image, picture aaa.png in this example.
Currently I have tried
body{
background-image: url(http://placeholder/aaa.png), url(http://placeholder/bbb.png);
box-shadow: 0 0 10px 10px, 0 0 0px 0px
}
and also swapping the placements of the 0 0 10px 10px to make sure that order wasn't an issue, but for some reason it is only applying thy box-shadow to the bottom image (bbb.png) (or it might be placing it to the farthest edges of the combined background image)
How can I make the box-shadow apply only to aaa.png
I checked online, and this example you provided should work, atleast it looks like it.
But okay, maybe try to take the other image, create a div put that small background picture as that div background, and then style it hoe you want, that should do the trick :)
I was working in a webapp (html / css) and I was asking myself if it's possible with css get what I've asked in the title.
I have this html:
<input type="text" class="custom-bg">
And this css:
.custom-bg {
background: url(icons.png) right -4579px no-repeat;
background-size: 39px 39px; //Size of the icon
}
My input is not always the same size, it may change if you resize the browser.
I want to put that icon (it's a down-arrow) in the right top corner, that's why I have right in the background property.
I want something like position: right 5% instead of a fixed position or value (number).
Is possible? (I mean the css-way, no js) It's an big webapp and there are some classes I can't touch.
Thanks
Baumann,
Absolutely that is possible, and I use this all of the time for input fields, especially with Search inputs. What you'll need to do is:
.custom-bg {
background: url(icons.png) no-repeat 95% 0px;
/*background-size: 39px 39px; //Size of the icon*/
}
As long as your icon is sized correctly in your file, you will not need the background size, and the 95% means that the icon will be placed to the far right of the input field, and the 0px is for your top to bottom spacing. You can adjust that percentage accordingly.
I'm trying to use multiple background images to obtain this result on a liquid width div:
I have split the image in three parts:
And I'm trying to style the div like this:
height: 14px;
background-image: url(static/img/workspace-pre-hr-l.gif),
url(static/img/workspace-pre-hr-bg.gif),
url(static/img/workspace-pre-hr-r.gif);
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: left, center, right;
But the right margin doesn't work and so I have this instead:
Any help? Thanks
EDIT
Fiddle! http://jsfiddle.net/J5Tsa/
SOLVED
Seems like it is a z-index problem among the images. Declaring the right margin before the repeated one solved the problem.
It is my understanding that images are stacked according to the order in which they are specified in the background-image property. So my theory is that workspace-pre-hr-r.gif is being displayed underneath workspace-pre-hr-bg.gif.
Try this...
background-image: url(static/img/workspace-pre-hr-l.gif),
url(static/img/workspace-pre-hr-r.gif),
url(static/img/workspace-pre-hr-bg.gif);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left, right, center;
CSS 3 supports border-image rule, which accomplishes what you want, should you be willing to give up compatibility with earlier CSS versions and user agents. The syntax looks much leaner and easier to read:
<div style="border-width: 25px; border-image: url(http://codebrief.com/old/uploads/2011/11/aqua_bg.png) 25 25 25 25 repeat; background-color: #00e0a0; background-clip: padding-box;">Hello World!</div>
I wrote and saved it at http://jsfiddle.net/Wnq3z/
I simply Googled and found a solution which I credit to http://codebrief.com/2011/11/two-game-changing-css-3-features/ after recalling I read something about this being present in CSS 3.
Waiting for a Fiddle, i can suggest you to use the center image only,
rounding up its borders with something like:
border-radius: 10px 10px 0px 0px;
EDIT: as a note, border-radius is born to bypass the Sliding Doors technique...
Basically..
I want to move the the background image that is for main div 200px from the top and then repeat on the y axis. So I don't want it to start for 200px; Can I do that through CSS? The only way I can think of is below, but it is not working.
I know I am doing somethign wrong, but what is it?
Here is the DIV:
<div class="main">
<p> Content Content </p>
</div>
Here is the CSS:
.main {
background: url('/wp-content/themes/blue-and-grey/images/addedimages/main-bg.png');
background-repeat:repeat-y;
background-position: 200px 0px 0px 0px;
}
You want the background-origin property (but note limited browser support).
i would try to move the div down with positiv margin and the p up to a negative margin. maybe you need some postion: relative, or so.
background-position only accepts to parameters: offset left, offset top...
background: url('image.url') 0px 200px repeat-y;
so you're not completely wrong with your solution, if you wanted to cut 200px of the first picture, (and than repeat the whole picture).
I use a table to show several images. I need to show the left half an image in the first td-element and the right half of it in the second td-element. This is because some of the images have double width as others. I thought i use a div and set this image as background image for the first two td-elements using a child-div. Now i am fiddling around to make it work using css.
Any suggestions?
Update: Working example: http://jsfiddle.net/BkAcu/2/
Use background-position: <horizontal> <vertical> where <horizontal> and <vertical> are background offsets, in conjunction with background-repeat: no-repeat.
Set the background-position to a negative value, to move the bg to the left.
See also: https://developer.mozilla.org/en/CSS/background-position
Example (assume your TDs to have a width of 100px, and the image to be 200px);
#td1, #td2 {
background: url("200.png") no-repeat;
}
#td2 {
background-position: -100px;
}