I have a problem wth setting two background, here it is:
rightCol {
margin: 0pt;
padding: 20px;
background: #AF7A38 url('../images/stain2.png') no-repeat scroll right top;
-moz-background-clip: border;
-moz-background-origin: padding;
-moz-background-inline-policy: continuous;
float: right;
width: 770px;
min-height: 810px;
height: auto ! important;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; behavior: url(PIE.htc);
}
As you see it sets the background right top with some width and height with #AF7A38 color background for the rest of column, but what I want to do is to set another background instead of color for example setting this:
background: url('../images/background2.jpg') repeat scroll 0% 0%;
to fill the rest of column instead of color.
thanks
As far as I know, you can only use one background per element. CSS3 changes this, however, so if CSS3 is an option I would go that route. Check it out here.
To use two background images, place the backgrounds in two elements. You can use the html and body elements for this if you want them behind the entire page, or add an empty positioned secondary element to place them behind a sub-element.
Related
I've made a CSS progressbar, using 2 overlapping elements. The CSS for the elements is as follows:
#status_progressbar {
height: 22px;
width: 366px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000;
cursor: pointer;
}
#status_progressbar_progress {
height: 22px;
background: #eee;
float: right;
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
/* width controlled by Rails backend, using inline style */
}
Unfortunately, the background from the parent is partly visible at the right edge, as you can see clearly in this picture. Since the background from the child element should precisely overlap the parent element, I don't know why this is the case.
[Picture taken in Firefox 4]
Maybe someone could explain to me why this is happening and how to solve it?
This is a known problem. One way around it, is by nesting rounded elements when you need a colored border. Pad the other box with the same amount as the width of the border.
More information can be found in this blog post by #gonchuki: Standards Compliancy is a lie (or, how all browsers have a broken border-radius)
An alternative COULD be to simply use the status_progressbar div (no children). Create an image that is wide enough (say 1000px) and the colour of your choice (personally i'd create one white 50% opacity).
then:
#status_progressbar {
height: 22px;
width: 366px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000 url("/path/to/image') repeat-y 0 0;
cursor: pointer;
}
I would then manipulate the background position property with javascript ALWAYS providing a px value NOT a % as %50 would center the image.
var prcnt = (YOURPERCENTAGE/100)* 366;
I was able to get a pretty good result by adjusting the CSS Slightly. (DEMO - Tested in Chrome & FF)
#status_progressbar_progress {
...
margin-right:-1px;
...
}
This just nudges the grey div to the right by a pixel. You can even up it to 2 pixels, which I think looks even better. Make sure you compensate for that pixel change in your calculations.
I think this happens because the browser tries to antialias the border and it probably does that by adjusting transparency so your under div is black and top gray so black gets trough. (don't quote me on this but thats atleast what seems logical to me).
Have you tried wrapping both status_progressbar and status_progressbar_progress in another div and give border-radius and overflow:hidden to that div?
You could try changing the border radius on the right hand side up by 1px on the background element. That might make it disappear behind the front
I have a bootstrap button with dimensions of 46 x 96px and border radius of 22px, when I hover this button I want to set the background color up to 40 x 90px. (I do not want to fill the entire button)
I know this can be done using a box-shadow but I have different pages with different page colors where this button is used, so I do not want to change the box-shadow color page by page to match page's background color.
Any easy way to do this?
You can leverage this with the backgroud-clip property.
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
MDN
Make the size of your button 40px x 90px and add 3px of padding.
Then on hover, set background-clip: content-box and the background color will be restricted to just the content and not the padding.
Exaggerated example below:
body {
background: lightgreen;
}
.button {
height: 30px;
width: 80px;
border-radius: 22px;
background: blue;
display: flex;
justify-content: center;
align-items: center;
margin: 2em;
padding: 8px;
border: 1px solid red;
color: white;
}
.button:hover {
background-clip: content-box;
}
<div class="button">Button</div>
As you can see from the border the button size does not change but rather the background just does not extend to the border from the content.
On hover, try adding a transparent border matching the button's background of size 6px, and change the background-color as needed. This will give the intended effect, but will also visually reduce the size of the button. From your question it was not clear whether that was an acceptable side-effect.
Check out this link to implement fully transparent borders.
I've a div using css 3,i'm placing a circle but when i place objects,it is going out of circle because div is still there and it is rectangle.
Can i use some thing instead of div and make circle.My objective is i need a circle ,when i place objects ,it should not move out of circle.
Thanks
There's no actual way of making an element circular. You can make it look circular using the well-known border-radius 'trick'.
To create the effect that the the text/contents of the div are only inside the borders of the circle, you can make sure it's filled within the largest square contained in the circle, using padding. Here's a visual illustration:
Here's a demo: little link.
HTML:
<div>
Glee is awesome! Glee!
</div>
CSS:
div {
border: 1px solid black;
-webkit-border-radius: 50px;
border-radius: 50px;
padding: 15px;
height: 70px;
width: 70px;
overflow: hidden;
}
Edit: for images, you have two cases:
You want the div to have a circular background. In this case, use the background-clip: padding-box; property (you need vendor-prefixed versions for this to work). Here's a demo: little link.
You have an img tag inside your div -- you can use the prior method.
If you create a div with a border-radius equal to it's sides then you should have what you're looking for.
Creating Circular div for CSS3 compatible browsers
In HTML5 there is an element called canvas. It can be used to draw, using javascript, and therefore also for animation. This might help you, if you only want to draw. Else you could go with the z-index property in css
create a div and give it border-radius
width: 230px;
height: 230px;
border-radius: 165px;
-webkit-border-radius: 165px;
-moz-border-radius: 165px;
Good Morning,
I am developing a four column footer using pure CSS, but I have ran into some issues:
1) I can't institute a vertical 1px white rules alongside each colum
2) The background does not cover the entire four colums
3) In Chrome, the columns do not appear across a single width, the fourth one being bumped below.
Here is my code: http://jsfiddle.net/eLzPk/
If you know the exact width of the footer you can do this with pure css. I just added a right border to the first 3 columns. FYI you forgot to declare the color of the border in your css. I also changed the width of the columns to 235px which is 940 / 4. First 3 have a 1px border so it's width: 234px plus the border. Here is the fiddle http://jsfiddle.net/eLzPk/7/
#footer dl {
background: black;
float: left;
margin: 0;
padding: 10px 0 5px 0;
width: 234px;
border-right: 1px solid #fff;
}
#footer dl + dl + dl + dl {
width: 235px;
border-right: none;
}
EDIT
To further explain one of the problems with css is that with borders and margins are added to the declared width, so if you have four columns with a width: 25% and a border of 1px to create a dividing line, it's actually 100% + 3px, which of of course larger than 100% so it causes the css to wrap.
There are 2 new solutions to this in css, one of them is fairly supported, it's called box-sizing, here is a good article to reference. http://css-tricks.com/box-sizing/ Basically it sizes the box to the declared width and adds the borders and margin inside of that. The downside is that it's not supported by IE7 and back. So to use it properly it's best to use an IE conditional statement and implement some css/js hack for just those browsers.
The other solution is the flexbox model, and it has very little support yet. But it's worth taking a look at. It allows you to have a container of any size, and size the children inside of it using ratios, to place them vertically or horizontally with ease, etc. It solves the box model issues as well as positioning and centering issues of all kinds.
How about something like this? Adding another Div Container with a fixed size inside of one that will adjust to the size of the browser. The Background can then be stretched using the commented code in #footer. You have to be aware of your margins, padding & borders when creating div sizes.
Every pixel counts ;)
Anywho hope this helps! Link for jsFiddle at bottom
#footer {
background: black
/* This would be your Background Image code for whole Footer.
background: url(FOOTER IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
*/
padding-right: 15px;
position: relative;
min-height: 250px;
text-align: center;
width:100%;
margin-left:auto;
margin-right:auto;
} /*IE6*/
#footerContainer {
width:940px;
height:250px;
display:block;
}
#footer dl {
display:inline-block;
background: black;
float: left;
text-align: left;
margin: 0px;
padding: 10px 0 5px 10px;
width: 224px; /* Take into account the 1px Border & padding*/
height:inherit;
border-left: 1px solid white;
}
Something like this: http://jsfiddle.net/GFargo/eLzPk/1/
As ACJ mentioned:
The border width (1 pixel) is added to the width, so four times 25%
plus 4 pixels is always more than 100%
You're better off defining a few set values to solve this.
Your shorthand border property was not working because although you defined a width (1px), its type (solid), you were missing (color).
If you're also working in HTML5, you can use the tag too...
Roughly, with some tweaking:
http://jsfiddle.net/eLzPk/8/
I'm trying to use 2 instances of background-image in one <div> layer.
The first background-image (which is partly transparent) should be displayed at top of the <div>, the second should be displayed directly under the the first background-image (this works).
Due dynamic content the second image with a height of 1px should be repeated vertically (repeat-y) and start repeating under the first background-image. My Problem is when I try to repeat the second background-image it is repeated over the whole <div> layer.
.mainFrameRoundBorder {
border: none;
background: url(../images/theme_box_main_l.png), url(../images/theme_box_main_2.png);
background-repeat: no-repeat, repeat-y;
border-radius: 0 0 0 0;
box-shadow:0 0 0 0;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-position: center top, 0px 364px;
margin-top:10px;
padding: 6px 15px;
overflow: hidden;
color: #FFFFFF;
}
I would suggest using the :before or :after pseudo-selectors. You could place your repeating background on the div as you normally do, and then put the non-repeating background in a pseudo-selector element.
This tutorial should be able to give you some good pointers on this method:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
I would suggest you to use z-index