I need some help setting a css button.
My intention is having 3 images inside a button forming a background image, lets call pic1, pic2 and pic3.
I set pic1 as left and pic3 as right making the borders, I want pic2 to repeat-x filling all remaining space in between, the problem is that pic2 will gladly overwrite pic3.
what I have so far:
button {
background: url("images/btn_00.jpg") no-repeat scroll 0 0%,
url("images/btn_01.jpg") repeat-x scroll center center,
url("images/btn_02.jpg") no-repeat scroll right center transparent;
}
Do what I want is possible? how, please?
Your styles are using CSS3 -- so be warned (if you did not already know) that this won't work in IE8 or lower.
The answer to your question lies in understanding the Stacking Order of Multiple Backgrounds -- you need to have pic 3 stacked on top of pic 2, which means it should be listed before pic 2. (This is counter-intuitive with respect to how z-index works to determine which elements paint over the others.)
Short answer: no.
One Element can only have one backgroud.
Perhaps you can do it with three elements in a element like:
<div id="mybutton">
<img src="leftimage.png" />
<span class="mymiddleElement">MyText in the Button</span>
<img src="rightimage.png" />
</div>
and set the backgroud of the .mymiddleElement with css
Related
I've got this peculiar bug I've been trying to fix today—-still no luck.
If you look at the example below,
http://vitaliyg.com/alpha/hire/
Here's what happens. The full-width background image loads in the correct position, centered along the y axis. Then when we hover over the image, the whole image jumps over to the middle, and slowly adjusts itself back to it's normal desired position.
What's causing this is left: 50%; margin-left: -960px;. This allows us to center the image correctly to begin with. If we didn't have this CSS, the hover wouldn't jump, but the image would load anchoring itself on the top left of the browser.
In the link above, the red box is the content div. The blue box is some text that will be parallaxing with the background-image.
Here is what I am trying to achieve:
Make the background-image appear centered.
When the user hovers over the background-image, it would not jump to the middle of the page.
And lastly, decrease the width of which the user would be able to "parallax" on the x axis. The way it is now, is that the user can see from side to side of the image if patient enough. I want the parallax to be very subtle.
Also, I'm using jParallax, found here:
http://stephband.info/jparallax/
Thank you for your help!
Once you set the position via CSS for the background image, it seems jQuery Parallax plugin alters those settings. The solution then is to apply those settings after the jQuery Parallax has dealt with that parallax layer.
First, remove the margin-left and left from your .parallax-layer#background class.
.parallax-layer#background {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-position: center bottom;
width: 1920px;
height: 620px;
}
Ideally, center the blue box using the same method (unless you want it partially off screen). I've also removed non essential CSS based on your HTML.
.parallax-layer#tagline {
background-color: blue;
width: 400px;
height: 400px;
}
Finally, add the CSS rules that were removed from the background and tagline selectors so they are applied after jQuery Parallax has manipulated those items.
jQuery(document).ready(function(){
jQuery('#parallax .parallax-layer')
.parallax({
mouseport: jQuery('body')
});
jQuery('#background').css({marginLeft: "-960px", left: "50%", bottom: "0px"});
jQuery('#tagline').css({marginLeft: "-200px", left: "50%"});
});
You no longer will see the large white section (body background color) to the left of the background image when the mouse enters the viewport.
This jQuery Parallax plugin aligns everything top/left by design. If the mouse enters the
viewport from the right of the blue box, that box animates to that location correctly.
However, should the mouse enter from the left side of the blue box, that box will 'jump' to the cursors location. You might consider removing the last jQuery line above so the blue box is top/left upon browser load or use a lower percentage value like 25%.
For those that landed on this Question/Answer and wanted some real markup to work with, I have set up two jsFiddles. One jsFiddle duplicated the problem and the other has the solution as shown above.
Original Problem - jsFiddle
Fixed Applied - jsFiddle
Both jsFiddles are in full screen mode so the Parallax effects can be seen.
Instructions to view Original Problem:
1. Launch the above Original Problem jsFiddle Link.
2. Press the jsFiddle Play Button, being careful not to enter the viewport. If the blue box moves in any way... you've entered the viewport so press the play button again.
3. Enter from the top/left of the viewport and you will see the problem... the HTML Body (white color) is seen as the background image readjusts itself.
4. Press the Play Button at any time to reset the webpage.
To see the Fixed Applied, either launch the link above or at the Browsers Address Bar modify the URL so you see revision 1 of that jsFiddle. (i.e., http://jsfiddle.net/UG4Sq/1/embedded/result/ )
The blue box indicates via text which jsFiddle your viewing. Cheers!
I work in front end and set CSS background using the shorthand notation very often. I was wondering for a div with a background image whose parent div has a white background - should the child have background-color white or transparent ? Which is better for performance?
ie:
<div id='parent' style='background:white;'>
<div id='child' style='background:WHITE image no-repeat center center;'></div>
</div>
OR
<div id='parent' style='background:white;'>
<div id='child' style='background:TRANSPARENT image no-repeat center center;'></div>
</div>
Simply don't set the background color in the shorthand declaration. You can skip it.
Saves on bandwidth, and css-browser-rendering-performance is kind of totally Dependant on the users/visitors browser!
Good luck!
Everyone's right suggesting that you leave off the declaration. It's good cascading.
However, you may want to declare it white when the interior element requires a white background - In which case it would be sensible to include it in the event this element will appear in other places.
The performance gains either way are largely unnoticeable I would say.
I have a 3 elements stacked on top of each other. The top element is the overlay content. The second element is a background border image. The bottom element is a background.
What I want to do is hollow out the middle element, so that I can see through the top element into the bottom element, but leave the border of the middle element surrounding the top element.
http://jsbin.com/unimux/4/edit
As you can see the middle element is blocking the view to the bottom element.
Edit: I did try using border-image but it wouldn't render correctly for me with border-radius.
Edit2: is it possible to get the desired effect with border-image? Kudos to anyone who can make it look not terrible with border-image.
Edit3: Some progress based on Zuul's answer:
http://jsbin.com/unimux/15/edit
Setup a new element, with a class, e.g., .apple and place it over all other existent elements with the same image as the bottom one:
See your JS Bin Example Altered!
div.apple {
margin: 100px;
width: 200px;
height: 200px;
background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center;
}
Having the image centred and by give a correct margin value, it simulates the "hollow" effect at the div.middle.
See the result preview:
If the elements dimensions aren't the same, the use of CSS position helps keepping everything into the proper place:
An example here!
You can't really do that with the current state of CSS. Maybe just put the bottom element on top of the middle one, and work?
As per egasimus, you can't really do that with CSS.
Try something like this though, with four divs creating the 'window'.
background-position: -200px 0;
one site says it crops an image from the bottom and displays the rest part
..another site is saying its shifting the image to the left..what exactly does it do ?
I am trying to implement CSS Sprites..having problem due to this positioning thingy...this is what I have implemented so far...its not working right..I have few links and I want a diff part of the image to be displayed when mouse is moved over a particular link...I am geting output as the whole image being displayed..it wont even crop it..I tried so many things like changing positioning, adding divs..what not..now I am so lost , I dont even know where I began..Could someone plz point out what am I doing wrong here ? Why is the image not getting cropped..sure something is wrong with this positioning X,Y values....
here's the code:-
<style type="text/css">
#sprite ul{background:url(images/image.jpg) no-repeat;
width:728px;height:1225px;display:block}
#ID1{background-position:0 -1000px}
#ID1:hover{background-position:0 -1000px}
#ID2{background-position:0 -1000px}
#ID2:hover{background-position:0-800px}
#ID3{background-position:0 1000px}
#ID3:hover{background-position:0 -600px}
#ID4{background-position:0 1000px}
#ID4:hover{background-position:0 -400px}
#ID5{background-position:0 1000px}
#ID5:hover{background-position:0 -200px}
#ID6{background-position:0 1000px}
#ID6:hover{background-position:0 -200px}
</style>
HTML:-
<div id="sprite">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</div>
background-position: -157px 0; will shift the image 157 pixels to the left. It will not be cropped.
The main problem from your code is that you are setting the background image on the ul, but then changing the background position on the links. So your background position rules will have no effect as the links don't have a background. You want to instead set the same background image on all of the links, probably with something like:
#sprite ul a {
background-image: url(images/image.jpg);
background-repeat: no-repeat;
}
along with some appropriate dimensions, and then take it from there.
one site says it crops an image from the bottom and displays the rest part ..another site is saying its shifting the image to the left..what exactly does it do ?
If in doubt, trust the specification; horizontal position comes before vertical position.
#sprite ul
If you want to show part of an image as the background to a list item or anchor, then you have to set the background on that element. Here you are just putting the entire image as the background to the list itself, and everything else is placed on top of it.
Instead you need to put a copy of the image on each link.
#ID2:hover{background-position:0-800px}
You need a space between the two values
The background-position property is a composite property of background-position-x and background-position-y, so the first value is the horisontal position and the second value is the vertical position.
The position is the top left corner of the image in relation to the top left corner element, so a negative x value means that the image is placed to the left of the element, in effect cropping the image from left.
(So, the site saying that the image is cropped from the bottom has both the value order and direction mixed up.)
I have a div with 60% opacity, to show part of a background image behind the div. Because the opacity is at 60%, the text in that div appears as grey.
Is there anyway to override this level and make the text appear black?
Any advice appreciated.
Thanks.
Set the opacity on the background rather than the element.
background-color: rgba(255,0,0,0.6);
A while ago I wrote about how to achieve this in a backwards compatible way.
I've experimented with this in the past on my own website. By far the easiest method to achieve what you want is to create a single-pixel .PNG image with its opacity set to less than 100% (i.e., partly-transparent) and use it as a background image. By default it will fill the whole containing element - make sure that the CSS background-repeat attribute is set to 'repeat' if it doesn't.
Doing things this way you don't have to set transparency on the containing element itself, hence the opacity of its text will be unaffected.
Amazingly, there is just the tool for making a semi-transparent single-pixel .PNG here.
The opacity applies to the whole div and all of its children. Unfortunately, you cannot undo that opacity, but only add more. And besides that, there's no way for CSS to select the text inside an element.
In your case, the best solution is to apply a transparent background image (with PNG) to your div block, like a white one pixel image with 60% opacity.
Another solution would be to use different boxes and positioning, like described in this tutorial by Steven York.
this should answer just about all of your questions: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
The simplest solution would be to create a semi-transparent PNG with the correct colour and use that as a background image.
Another solution that may be possible depending on your layout is to put the text in a separate layer and position that over the top of the semi-transparent part. Something like this would work:
<div style="position: relative; background-image: url('your_image.jpg')">
<div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
<div style="position: absolute">The text to go on top</div>
</div>
You'd need to add your own positions/sizes (the top, left, width and height properties) as appropriate.