tl;dr version: want to position half an image outside of the bxslider div however overflow:hidden causes every slide of the carousel to show up.
Code I'm using: http://www.dtcontentguy.com/bxslider/
Screenshots: http://screencast.com/t/bTTvC4VPEQ
Long version:
So configuring bxslider for a carousel to use on my site.
How it should look like (in photoshop) (see screenshot 1)
My main concern is the circular png I'm using. To match the style, I want to position the top half of it outside the div. I position it then it looks like this, all cut off (screenshot 2)
That's because by default there is a overflow:hidden to hide the other portions of the carousel. If I turn off the overflow:hidden, the image looks fine but of course the other items show (screenshot 3)
How do I get the image to conform with the carousel but get around the overflow:hidden?
Thanks!
One approach could be to increase the height of the container and push the content down like so:
/* Increase container height, align background to bottom */
.bx-wrapper .bx-viewport {
height: 456px!important;
background-repeat: no-repeat;
background-position: bottom center;
}
/* Push slider arrows down */
.bx-wrapper .bx-controls-direction a {
margin-top: 25px;
}
.bxslider {
margin: 0;
}
/* Push slider content down */
.bxslider li {
padding-top: 184px;
}
/* Position image at top center */
.bxslider li img {
position: absolute;
top: 0;
left: 50%;
margin-left: -91px;
}
Related
There are tons of questions on SO regarding vertical alignment, but I haven't discovered a clear answer to my problem.
I created a fiddle to show exactly what I'm trying to do.
HTML:
<div id="fade"></div>
<div id="fullscreen">
<img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>
CSS:
#fade {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Transparent Background */
background-color: #000;
opacity: 0.50;
}
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
/* Adding the display: block allowed me to center
the image horizontally with the margin: auto. */
display: block;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
/* This didn't work for me. */
vertical-align: middle;
/* This didn't do anything, either. */
line-height: 100%;
}
I am trying to make a lightbox of sorts, such that the user will click on an image on the page, causing that same image to load up in fullscreen mode. The first div, fade, will be used to cover the entire page with a semi-transparent black background, essentially giving the effect of the page fading away, while also making things modal.
I wanted to be able to nest the image inside the fade div, but I ran into a problem. Setting the opacity on the outer div (to create the fade effect) caused my nested image to inherit the opacity value. Thus, I added a separate div that was identical to the first one, except without the background, and nested the image inside of that.
For the record, I did manage to figure out a workaround to the opacity issue, but I haven't yet implemented it. Credit to Blowski, a SO user who posted this answer to a question regarding opacity:
I do not want to inherit the child opacity from the parent in CSS
The long story short, I have tried quite a few things now in trying to get this image to be centered vertically, but to no avail.
Keep in mind, this solution needs to work with any image!
I am certainly capable of adding a line of code to the $(window).resize() function to center the image manually, but I would like to avoid doing so, if possible. I'm very curious to learn a way around this, as I seem to run into these types of issues more often that I'd like.
Bonus: Why is vertical alignment so difficult for a browser to perform?
Here is one way centering an image in a fixed/absolute positioned div using CSS.
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
}
The trick is to use position: absolute for the img and set all the offsets to 0, and then margin: auto will center the image.
The max-width and max-height values will work as expected.
The reason this works is that the image has intrinsic dimensions, so the CSS engine has specific values to do the necessary math to center the images both vertically and horizontally.
See demo at: http://jsfiddle.net/audetwebdesign/KG99S/
Comments
Note that this technique works independently of the overlay.
Also, this works regardless of the aspect ratio of the image.
Reference
This technique follows from the CSS2 specification regarding how the horizontal and vertical margins are determined for absolutely positioned inline, replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
and
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height
I have 4 phone images next to each other, with transparent screens. When the browser's screensize is changed, the phones come closer to each other.
There should be a background image visible through the screens of the phones, but I can't use a background-image for the container and then have each phonescreen transparent, because then one phone will show another one underneath it, as demonstrated here:
http://jsbin.com/ozoyoc/1/
What else I've tried:
Put the container background-image in each phone-div, didn't work, it seems that the alignment with background-position in percentage doesn't clip the correct part of the image when resizing the browser window (*)
Put a div in each phone-li, which represented the screen. Couldn't offset the image to the correct position for each phone because the % would be relative to the parent element size, which is the li and not the container
Can this be implemented in CSS or will I have to look at Javascript to set the correct image offset?
edit:
* (1) To clarify, in this fiddle the position of the window moving-div does show the correct part of the image based on its position. Maybe this is because it's specified in absolute px instead of percentages ? http://jsfiddle.net/XjCCK/39/
.moving {
left: left,
top: top,
backgroundPositionX: -left,
backgroundPositionY: -top
}
You can use background-attachment: fixed; to position the inner background (droplets in your case) properly, and then clip it using top/left/right/bottom.
.iphone {
/* needs to have a position value other than 'static' for clipping below */
position: absolute;
/* untouched rules */
width: 177.6px;
height: 411px;
top: 15.2%;
left: 18.488%;
z-index: 2;
/* moved your iphone image to the outer container */
background-image: url(http://s18.postimg.org/fzjmm7kih/iphone5.png);
background-size: 100%;
}
.iphone > div {
position: absolute;
/* clip */
top: 13%;
right: 10%;
bottom: 26%;
left: 10%;
/* i put your droplet image on the inner div */
background-image: url(http://s16.postimg.org/vqs385e6t/background_leaf.jpg);
/* positioning magic */
background-attachment: fixed;
}
See demo at http://jsbin.com/ozoyoc/2/
Source: http://meyerweb.com/eric/css/edge/complexspiral/demo.html (created before the days of alpha-transparent colors or png support)
The problem is: I have a huge background image and content with those characteristics:
the content is centered with margin: auto; and it has a fixed width
the position of the content is in relation to the image (like it fits in the middle of the image)
this connection is only horizontally (vertical scrolling moves everything around as expected)
This works fine, actually, on desktop devices with position fixed on the background image.
But the problem is: When I resize the window until it's smaller than the content, the content is fixed on the left side, but the background image is still centered, as expected. In this case the connection between both elements gets lost.
I have this JavaScript that does the trick, but this is of course some overhead I want to avoid as it isn't smooth anytime due to the calculation:
$(window).resize(function(){
container.css('left', (body.width() - img.width()) / 2);
});
I also tried things like that:
<div id="test" style="
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%:
height: 100%;
background: transparent url(path) no-repeat fixed center top;
"></div>
But this results in the same issue described above.
Is there any elegant CSS solution for this problem?
Demo
Try it yourself
NOTE
The image size is fixed and known and it never gets scaled by the browser.
Is this working for you? http://jsfiddle.net/wPmrm/24/
HTML
<div class="background">
<div class="content">
CONTENT
<br><br>
This example works fine until you the viewport size gets smaller than this content. After that the image isn't sticky anymore.
<br><br>
And check out vertical scrolling.
<div style="height:1500px;"></div>
END
</div>
</div>
CSS
div.background {
min-width: 740px;
background: url('http://placehold.it/1600x1050') top center fixed no-repeat;
}
div.content {
width: 700px;
height: 2000px;
margin: auto;
padding: 50px 20px;
background: none;
opacity: 0.7;
color: #333;
}
.background should be the wrapper for .content with a centered background and have a minimum-width of the .contents width+padding.
Update from comments:
http://jsfiddle.net/wPmrm/28/
We'll have to use a media-query, so when the width is at max 740px we change the background position. Oh and we set background-attachment to fixed again.
CSS added
#media screen and (max-width:740px) {
div.background {
background-position: -435px 0;
}
}
I don't see why it is -435px ((1600-740)/2 would be 430) but it seems to be the most accurate value.
Im using a float: right on my website. I want to make that div 100% of the window height minus a 10px margin. I want the height to resize with the page.
I also want the image in it to sit at the bottom of the 'container' minus 10px padding.
I've tried adjusting everything, and am sure its something in the code conflicting but i just can't work it out.
Thanks for any suggestions in advance.
I suggest you use absolute positioning instead of floating for this, you can make elements expand by setting for example top and bottom at the same time.
Absolute positioning could work for the image as well if you set its bottom to 10px (its offset parent will already be the right container, because any position other than the default static makes the element an offset parent).
Quick example:
/* this makes your body take up the whole screen */
html, body { height: 100%; }
/* the positioning magic */
#right { width: 100px; position: absolute;top: 10px; bottom: 10px; right: 20px; }
jsFiddle Demo
​UPDATE: and an updated jsFiddle to show an example on putting another element in the container and positioning it to the bottom.
#image { position: absolute; bottom: 10px; left: 20px; }
I'm trying out the jQuery Lavalamp menu and I'm trying to alter it and understand how it works at the same time. Thing is, all examples I've found consist of basically two images.
The background and the left image. That ok, but I want to create a menu where it consists of three images. The background, the middle and the left. And the middle should react in the same way as the left one, only be positioned in the middle of the menu item at all times.
Does anyone have any idea on what should be done to make this happen? I just need to somehow insert a static 15px div in between the structure.
Well, what they are doing is this:
Position the outer div under the list
Give it the image of the right and middle
Add a nested div, that is 100% of the width
Give that the left image, aligned left.
What you'll want to do is use 3 nested divs.
The outer div with the center/bg with background-position: center top;
The inner div with the left image with left top
The innermost div with the right image, background-position: right top;
I'll illustrate that in a moment...
[edit]
New markup in the js file:
<li class="back"><div class="left"><div class="right"></div></div></li>
New css:
.lavaLampWithImage li.back {
background: url("middle.jpg") no-repeat center top; // could be repeat-x
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("left.jpg") no-repeat left top;
height: 30px;
}
.lavaLampWithImage li.back .right {
background: url("right.jpg") no-repeat right top;
height: 30px;
}
[another edit]
I did not realize you wanted a static thing in the middle.
Since you have 2 nested divs right now, would it work to add a third, like above?
Only this time assign the innermost div a width of 15px and add margin: 0 auto;
Leave the other 2 as they are.
Since the other 2 divs are filling up 100% of the free space this should place the third div in the middle.