I have two columns that can stretch to variable heights, the designer wants to have a shadow between the two columns, but as you can see the image fades out at the top and the bottom. That means I can't just use a background image using css that is left aligned in the column on the right.
So then I though maybe I can use a css 3 border shadow that has a radial gradient. I am probably going to use table cells to do this because I need the shadow to stretch to the height of the tallest column. How do I do this?
Previous answers doesn't really answer your question: "How do I create a radial css3 border gradient shadow"
You can use a radial gradient to simulate a border shadow without images.
Demo: http://jsfiddle.net/sonic1980/wRuaZ/
background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%);
| | | |
| | | +--> color end
| | +--> color start
| +--> size of gradient ellipse (x-axis, y-axis)
+---> position of ellipse center
It's easy to modify to make it vertical or implement using :before or :after pseudo-classes.
Another example, an <hr> tag with shadow: http://jsfiddle.net/sonic1980/65Hfc/
i have a suggestion that you do not need use css3, you may use two different class, one is normal, and other has background. And when loading page finish, and call js method, settimeout to dely some seconds, toggle class.
I think I am just going to use the image, and set a min-height on the div :-)
.column.right {
padding-left: 30px;
background: url(/img/shadow.png) no-repeat left top;
min-height: 265px;
}
Another solution would actually allow for a dynamic height column, but it only has IE8+ support.
What you'd do is apply a background-image positioned to the edge of the tallest column. Then you could use the :before and :after pseudoelements, set to absolute positioning of top:0; and bottom:0 respectively, to set the 'cap' on the shadows.
Does that make sense? Here's a JSFiddle that shows it using a border and text, instead of images.
Of course, the height parameter of the div in the JSFiddle is of no consequence; it could be min-height or nonexistent. I just set it to give the div some size.
Related
I have some divs, and they have their backgrounds set as images using this:
background:url(myimage.jpg);
Now what I'm looking to do is set a border on that image that is set to the background.
I don't want to set a border on the div as this does not give the desired result, it must be a border on the image.
Not sure if this is possible, is it?
You could try using multiple backgrounds, by setting your base bg image and a second one as a border.
#container {
background-image: url(Main-bg), url(Border-img.png);
background-position: center center, left bottom; /* border bottom in this case */
background-repeat: no-repeat;
}
It is not possible to do it precisely as you've mentioned. Since the background image is styling, rather than content, no additional styling can be added to it.
The best option would be to create a different image file to serve the bolder border.
I have a background gradient on a div (only code for FF shown below for readability)
background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);
I then have an image inside this that needs to "break out" the bottom over a second div below that has the same gradient. I am using z-index 2 on the image, z-index 1 on the div.
This works fine when the divs have no gradient (just a solid background colour), but as soon as I apply the gradient the z-index fails and the image drops behind the second div, see images below:
With gradient background
With solid background
The issue was the z-index on the containing div, even though it was set lower than the image, removing it fixed the problem :/
I'm going to guess that the elements with the z-indexes don't have a position property. Then z-index won't work. It may seem to work with no gradient, but that is because the background-color of the div is transparent an the image is visible underneath it, giving the impression of being on top.
Am I right?
This question already has answers here:
CSS: Background image and padding
(9 answers)
Closed 3 years ago.
I'd like to add a background to a div, position right center, but!, have some padding to the image. The div has padding for the text, so I want to indent the background a little. probably makes most sense w/ example:
http://jsbin.com/umuvud/edit#javascript,html,live
Thanks!
Updated Answer:
It's been commented multiple times that this is not the correct answer to this question, and I agree. Back when this answer was written, IE 9 was still new (about 8 months old) and many developers including myself needed a solution for <= IE 9. IE 9 is when IE started supporting background-origin. However, it's been over six and a half years, so here's the updated solution which I highly recommend over using an actual border. In case < IE 9 support is needed. My original answer can be found below the demo snippet. It uses an opaque border to simulate padding for background images.
#hello {
padding-right: 10px;
background-color:green;
background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
background-origin: content-box;
}
<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>
Original Answer:
you can fake it with a 10px border of the same color as the background:
http://jsbin.com/eparad/edit#javascript,html,live
#hello {
border: 10px solid #e8e8e8;
background-color: green;
background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
no-repeat scroll right center #e8e8e8;
}
this is actually pretty easily done. You're almost there, doing what you've done with background-position: right center;. What is actually needed in this case is something very much like that. Let's convert these to percentages. We know that center=50%, so that's easy enough. Now, in order to get the padding you wanted, you need to position the background like so: background-position: 99% 50%.
The second, and more effective way of going about this, is to use the same background-position idea, and just use background-position: 400px (width of parent) 50%;. Of course, this method requires a static width, but will give you the same thing every time.
Method 1 (99% 50%)
Method 2 (400px 50%)
There is actually a native solution to this, using the four-values to background-position
.CssClass {background-position: right 10px top 20px;}
This means 10px from right and 20px from top.
you can also use three values the fourth value will be count as 0.
you can use background-origin:padding-box; and then add some padding where you want, for example: #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;}
This way you attach the image to the div padding box that contains it so you can position it wherever you want.
In case anyone else needs to add padding to something with background-image and background-size: contain or cover, I used the following which is a nice way of doing it. You can replace the border-width with 10% or 2vw or whatever you like.
.bg-image {
background: url("/image/logo.png") no-repeat center #ffffff / contain;
border: inset 10px transparent;
box-sizing: border-box;
}
This means you don't have to define a width.
first off, to be a bit of a henpeck, its best NOT to use just the <background> tag. rather, use the proper, more specific, <background-image> tag.
the only way that i'm aware of to do such a thing is to build the padding into the image by extending the matte. since the empty pixels aren't stripped, you have your padding right there. so if you need a 10px border, create 10px of empty pixels all around your image. this is mui simple in Photoshop, Fireworks, GIMP, &c.
i'd also recommend trying out the PNG8 format instead of the dying GIF... much better.
there may be an alternate solution to your problem if we knew a bit more of how you're using it. :) it LOOKS like you're trying to add an accordion button. this would be best placed in the HTML because then you can target it with JavaScript/PHP; something you cannot do if it's in the background (at least not simply). in such a case, you can style the heck out of the image you currently have in CSS by using the following:
#hello img { padding: 10px; }
WR!
To add space before background image, one could define the 'width' of element which is using 'background-image' object. And then to define a pixel value in 'background-position' property to create space from left side.
For example, I'd a scenario where I got a navigation menu which had a bullet before link item and the bullet graphic were changeable if corrosponding link turns into an active state. Further, the active link also had a background-color to show, and this background-color had approximate 15px padding both on left and right side of link item (so on left, it includes bullet icon of link too).
While padding-right fulfill the purpose to have background-color stretched upto 15px more on right of link text. The padding-left only added to space between link text and bullet.
So I took the width of background-color object from PSD design (for ex. 82px) and added that to li element (in a class created to show active state) and then I set background-position value to 20px. Which resulted in bullet icon shifted inside from the left edge. And its provided me desired output of having left padding before bullet icon used as background image.
Please note, you may need to adjust your padding / margin values accordingly, which may used either for space between link items or for spacing between bullet icon and link text.
Is it possible to hide lower div background fully?
I have two fixed position divs with shadow - semi transparent background so they overlap and become darker.
Is there a way - in Adobe Air - to make the lower div's background fully hidden?
Not sure if this helps or what you mean by "in adobe air" but can you not position the background of the second div to start further down with css eg
.div2 {
background-position: 0 50%;
}
Or you can move it down a set number of pixels maybe.
read more about bg positioning: w3c schools
If you want to hide the seconde div why not use jquery to hide it?
$("div1.class").hide()
Is it possible that I can create a margin/padding between the background image and container that holds the image? In other words, I need to move the background image sprite_global_v3.png 20px to the right of the left border of #nav-primary.
Here the position "0 -470px" are used to pick the right picture from sprite. And I don't know how to apply a padding/margin of 20px in order to achieve what I expected.
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}
<div id="nav-primary">
<span>Hello World</span>
</div>
Based on http://www.w3schools.com/css/css_background.asp
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
If I understood correctly, the background-position is used to control the alignment of the background image. Now I need to control alignment and choose the right picture from a sprite. I don't know whether or not I can mix it together.
Thank you
No, there is no concept of padding/margin for background images.
Options:
1) Positioning the background (as already stated). The key is that the container would have to have fixed dimensions.
2) Nest a container inside a parent container. Parent gets the padding, child gets the background image.
Given that you are trying to do this with a sprite, both are likely options since a sprite has to have a fixed sized container anyways. For option 1, you'd need to make sure your sprite images have enough white space between each other in the file.
No, you can't mix them together.
You can place an image at an offset from the corner:
background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: 20px 20px;
But you can't combine this with the sprite techinque. This technique uses the fact that the element is smaller than the background image to clip the image, but you can't clip the background image 20 pixels into the element.
You can specify the exact position of the background to the pixel.
If you wanted a 10-pixel gap on the left-hand side, for example:
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll transparent;
background-position:10px 0px;
}
That being said, it looks like you already specified it to be set at (0, -470). Does that not work?
The background-position property allows for percentages and values, e.g. "20px 0", which I think is what you're looking for.