Develop Reference

Background image via CSS to <div> distorts child divs

This is my first question.
My code is here on codepen.
I've been tinkering with Bootstrap, CSS, and jQuery in this code in an attempt to place a full-width background image behind the last featurette(From Bootstrap demo) item on my page. I'm guessing the problem stems from the bootstrap container class, but I am hoping for a work around.
I've enclosed the featurette with a div tag, applied an ID of "background1" to it, then used CSS in my attempt to set position to absolute and left:0.
This gets me the position I want (except I'd also like the background image to be responsive as in Bootstrap img-responsive), but the childen? tags inherit the opacity and positioning.
I've tried z-index:-1 unsuccessfully. What also seems to be happening is that the low opacity has allowed the footer to creep up into my last featurette item as if opacity also messes with the z-index.
So my questions are:
How can I stretch a BG image across the back of the featurette or any other set of grouped items within DIV tags?
How can I make this BG image responsive with Bootstrap or apply the img-responsive class through CSS?
Happy New Year! Thanks for reading!

Don't wrap your content. Use <div id="background1"></div> right before the content, and this:
#background1 {
width: 100%;
height: 100%;
position: absolute;
opacity: 0.3;
left: 0;
background-size: cover;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Kiyomizu-dera%2C_Kyoto%2C_November_2016_-01.jpg/800px-Kiyomizu-dera%2C_Kyoto%2C_November_2016_-01.jpg");
}

scroll and position: fixed inside overflow: scroll div

I have a position: fixed div besides a div with long text inside a div with overflow: scroll. I want the text to scroll even if my cursor is hovering over the fixed div (which is the normal behavior when the window would be the scrolling element).
I made a fiddle: http://jsfiddle.net/jM2Eh/1/
I basically want the text to scroll while scrolling hovering over the red box.
UPDATE: I am using Twitter bootstrap in this particular case and updated the fiddle accordingly.
If JavaScript is needed for that, that would also be ok.
UPDATE2: I also tried this solution, but that causes weird flickering effects:
http://jsfiddle.net/jM2Eh/16/

Have you tried using padding-left on your text node instead of using two columns?
http://jsfiddle.net/j5BLm/15/
.text {
padding-left: 50%;
}
Another possible solution is to use pointer-events: none if you don't care about IE:
http://jsfiddle.net/codedigger/jM2Eh/18

Why are my images moving from Jquery bounce effect?

I just want the bounce effect to be on the mousover of the #bounce1,2,3... images on the homepage, but it seems to be forcing images to the next line.
what gives?
http://jameshiggins.ca/nlms/

You can achieve the same effect without JavaScript and jQuery, using only CSS3. Use #keyframes to define the key frames and then use it in animation property.
Here is the JSFiddle demo regarding to your example.For more information about the animation property of CSS3 please check this URL.

You'll want to add this to your style sheet.
#fp_brands a .ui-effects-wrapper {
float: left !important;
width: 33% !important;
}
The ui-effect-wrapper div that jquery-ui uses in it's animations can sometimes mess up floated elements. This is because it's css rules include width: 100%; and float: none;

Using the element inspector, applying float:left; to each image made them animate as desired. I would apply it to the class attachment-medium if you don't use it anywhere else to save code

Try to add this css and remove width="33%" from img tag?
.attachment-medium {
position:relative;
width:235px;
height:100px;
}

Can I set a div's background to be two different images filled to 2 different %'s?

After looking through W3Schools I'm still not sure if this is possible or not.
The idea is to have the div be a progress bar. (Yes, I am aware of jQuery UI's progress bar.) I would like it to start out 100% filled with one background-image, but overtime have it fill from 0%/100% to 100%/0%.
I see that it is possible to have multiple background images specified using css: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple
but I am not sure how to extend that logic to having only % widths. Any ideas? Thanks

You can't set the width of a background image. But the solution is easy. The div by itself is the progress bar at 0% (so has the unloaded background image), then have another div inside that which is the actual progress (which animates from 0% to 100% and has the loaded background image). So you animate the width of the div inside the progress bar to represent progress.

This site has a few examples that use a span within a div:
http://css-tricks.com/css3-progress-bars/
it's not using images (just CSS3), but you could easily update it have background images on both the span and the div. CSS3 does allow multiple background images (http://www.css3.info/preview/multiple-backgrounds/) but I'm not really sure if it's the best use for your example.

Using position: absolute; or position: relative;, it's possible to overlay one image with another; you'll have to be careful with the z-index, though. You'll then be able to animate the width of the image you want to act as the 'progress meter' using jQuery's animate() function, like this (assuming your progress meter image width starts out at 0px and will end up at 100px):
$("#progress_meter").animate( {"width": "100px"}, 5000);

No, but you can set another div on top of the initial div and have a higher z-index property.
For example, on the code below, div-a will be on top of div-b:
.div-a {
with: 50%;
height: 30px;
z-index: 2;
}
.div-b {
width: 100%;
height: 30px;
z-index: 1;
}

Slide Background with AnythingSlider

I need to slide a background when clicking the "next" arrow, and the "previous" arrow - right now the background is in the #container element - However, that doesnt work - I've tried putting the background on the ul#slider element - But that doesnt work either...
What i need is that the background will be slider as much as the liinside the slider...
Any suggestions on how to do that ?
You can see the project here: http://www.i-creative.dk/Slider/
thx

I've built something like what you're asking for, and it's a total pain.
The problem is, you're talking about having a different background image, the size of the page, for EVERY slide.
2 options are:
1: Have one BIG background image, with all the background aligned horizontally, and animate the css background-position when you change a div, to keep things matching. This ahs the advanatage that only one image needs to be downloaded, but it will be big.
Problems are: you see all the other images if you jump multiple steps at once;
it requires that you use a fixed width;
it's a pain if you want to change the background for just one slide;
Preload the background for the next slide on a div which is a sibling of container but has a higher z-index. Use jquery to slide this over the existing background, from the appropriate side.
The good thing about this method is that you can use css to make the background image always take up the full-width of the screen, or use a bigger imager and have it centred. See here: http://cksk.com for an example.
Long story short, you won't get this working with an off-the-shelf solution, you'll need to get your hands dirty.
Also, you'll need to spend a hell of a lot of time on optimisation.

Try this css...
#slider {
width: 472px; /* divided the width of the background image by 4 (# of panels) */
height: 570px;
list-style: none;
/* start background after the initial cloned panel: 472px to match panel width */
background: transparent url(../images/background.png) 472px 0 repeat-x;
}
/* This makes sure the last cloned panel background matches the first panel */
ul#slider li.clone {
background: transparent url(../images/background.png) 0 0 repeat-x !important;
}
/* Make the background visible */
div.anythingSlider .anythingWindow {
overflow: visible !important;
}
The only problem is that the width of the UL is limited, so when you get to the last panel, the background ends, but reappears once you hit the right arrow.