Slideshow in homepage - how to fix the positioning

[fabthi]

Hi all

before I expose my problem let me start by saying that I have little to none skills in dealing with CSS.

However I have a website hosted on a photo sharing platform, SmugMug, that allows users to use CSS to customize their sites at their liking beyond the customization tools provided by default; only, understandably, they don't provide support on that.

I added in homepage a CSS code, provided by a fellow SmugMug user, to have a full width slideshow, which is not available with the standard customization.

The slideshow is working pretty well except for one thing:

images expand invading the header area devoted to the logo and menu, where a white background is supposed to be.

This is the layout as it is supposed to be (with a static image though)

And this is how it looks like once the CSS code is added

So what I need is to adjust the placement of the slideshow to leave the header area above it showing the white background I decided to have.

This is the CSS code, I hope someone can help me with the right suggestions on how, if possible, to amend the code.

/*-----  Code to display fullscreen background for all browsers ie 9 and less  -----*/.sm-ie-5, .sm-ie-6, .sm-ie-7, .sm-ie-8, .sm-ie-9 {  background: url(http://www.imaginevenice.com/photos/i-NCcdMzh/0/XL/i-NCcdMzh-XL.jpg) no-repeat center center fixed;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}/*-----  Code to display slideshow for all other browsers  -----*/.cb-slideshow,.cb-slideshow:after {     position: fixed;    width: 100%;    height: 100%;    top: 0px;    left: 0px;    z-index: -99999; }.cb-slideshow:after {     content: '';    background: transparent url(../images/pattern.png) repeat top left; }.cb-slideshow li span {     width: 100%;    height: 100%;    position: absolute;    top: 0px;    left: 0px;    color: transparent;    background-size: cover;    background-position: 50% 50%;    background-repeat: none;    opacity: 0;    z-index: 0;	-webkit-backface-visibility: hidden;    -webkit-animation: imageAnimation 36s linear infinite 0s;    -moz-animation: imageAnimation 36s linear infinite 0s;    -o-animation: imageAnimation 36s linear infinite 0s;    -ms-animation: imageAnimation 36s linear infinite 0s;    animation: imageAnimation 36s linear infinite 0s; }.cb-slideshow li div {     z-index: 1000;    position: absolute;    bottom: 30px;    left: 0px;    width: 100%;    text-align: center;    opacity: 0;    color: #fff;    -webkit-animation: titleAnimation 36s linear infinite 0s;    -moz-animation: titleAnimation 36s linear infinite 0s;    -o-animation: titleAnimation 36s linear infinite 0s;    -ms-animation: titleAnimation 36s linear infinite 0s;    animation: titleAnimation 36s linear infinite 0s; }.cb-slideshow li div h3 {     font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;    font-size: 240px;    padding: 0;    line-height: 200px; }.cb-slideshow li:nth-child(1) span {     background-image: url(http://www.imaginevenice.com/1680x1120/i-gxgvk99/0/X3/Weddings%201680x1120%20ottimizzata-X3.jpg) }.cb-slideshow li:nth-child(2) span {     background-image: url(http://www.imaginevenice.com/1680x1120/i-gbn2Pvv/0/X3/_MG_0395-X3.jpg);    -webkit-animation-delay: 6s;    -moz-animation-delay: 6s;    -o-animation-delay: 6s;    -ms-animation-delay: 6s;    animation-delay: 6s; }.cb-slideshow li:nth-child(3) span {     background-image: url(http://www.imaginevenice.com/1680x1120/i-LTQK4WP/0/X3/_MG_7763-X3.jpg);    -webkit-animation-delay: 12s;    -moz-animation-delay: 12s;    -o-animation-delay: 12s;    -ms-animation-delay: 12s;    animation-delay: 12s; }.cb-slideshow li:nth-child(4) span {     background-image: url(http://www.imaginevenice.com/1680x1120/i-8sMvpMZ/0/X3/_MG_7832-X3.jpg);    -webkit-animation-delay: 18s;    -moz-animation-delay: 18s;    -o-animation-delay: 18s;    -ms-animation-delay: 18s;    animation-delay: 18s; }.cb-slideshow li:nth-child(5) span {     background-image: url(http://www.imaginevenice.com/1680x1120/i-2XCkMw3/0/X3/IMG_2109-Edit-X3.jpg);    -webkit-animation-delay: 24s;    -moz-animation-delay: 24s;    -o-animation-delay: 24s;    -ms-animation-delay: 24s;    animation-delay: 24s; }.cb-slideshow li:nth-child(6) span {     background-image: url(http://www.imaginevenice.com/1680x1120/i-WcdF4nR/0/X3/IMG_2618-X3.jpg);    -webkit-animation-delay: 30s;    -moz-animation-delay: 30s;    -o-animation-delay: 30s;    -ms-animation-delay: 30s;    animation-delay: 30s; }/* Animation for the slideshow images */@-webkit-keyframes imageAnimation {     0% { opacity: 0;    -webkit-animation-timing-function: ease-in; }    8% { opacity: 1;         -webkit-animation-timing-function: ease-out; }    17% { opacity: 1 }    25% { opacity: 0 }    100% { opacity: 0 }}@-moz-keyframes imageAnimation {     0% { opacity: 0;    -moz-animation-timing-function: ease-in; }    8% { opacity: 1;         -moz-animation-timing-function: ease-out; }    17% { opacity: 1 }    25% { opacity: 0 }    100% { opacity: 0 }}@-o-keyframes imageAnimation {     0% { opacity: 0;    -o-animation-timing-function: ease-in; }    8% { opacity: 1;         -o-animation-timing-function: ease-out; }    17% { opacity: 1 }    25% { opacity: 0 }    100% { opacity: 0 }}@-ms-keyframes imageAnimation {     0% { opacity: 0;    -ms-animation-timing-function: ease-in; }    8% { opacity: 1;         -ms-animation-timing-function: ease-out; }    17% { opacity: 1 }    25% { opacity: 0 }    100% { opacity: 0 }}@keyframes imageAnimation {     0% { opacity: 0;    animation-timing-function: ease-in; }    8% { opacity: 1;         animation-timing-function: ease-out; }    17% { opacity: 1 }    25% { opacity: 0 }    100% { opacity: 0 }}/* Animation for the title */@-webkit-keyframes titleAnimation {     0% { opacity: 0 }    8% { opacity: 1 }    17% { opacity: 1 }    19% { opacity: 0 }    100% { opacity: 0 }}@-moz-keyframes titleAnimation {     0% { opacity: 0 }    8% { opacity: 1 }    17% { opacity: 1 }    19% { opacity: 0 }    100% { opacity: 0 }}@-o-keyframes titleAnimation {     0% { opacity: 0 }    8% { opacity: 1 }    17% { opacity: 1 }    19% { opacity: 0 }    100% { opacity: 0 }}@-ms-keyframes titleAnimation {     0% { opacity: 0 }    8% { opacity: 1 }    17% { opacity: 1 }    19% { opacity: 0 }    100% { opacity: 0 }}@keyframes titleAnimation {     0% { opacity: 0 }    8% { opacity: 1 }    17% { opacity: 1 }    19% { opacity: 0 }    100% { opacity: 0 }}/* Show at least something when animations not supported */.no-cssanimations .cb-slideshow li span{	opacity: 1;}@media screen and (max-width: 1140px) {     .cb-slideshow li div h3 { font-size: 140px }}@media screen and (max-width: 600px) {     .cb-slideshow li div h3 { font-size: 80px }}

Thanks in advance to for the help!

Fabio

[davej]

For something like this it would be much better to post a link to the actual site. I am not familiar with that type of "slideshow." Do the images change one at a time?

[fabthi]

Hi Davej

thanks for your contribution.

And yes, it would be much easier to see the actual homepage but the fact is that the website is still in "unpublished" mode and therefore impossible to be seen from visitors.

Yes, images change one at a time; the ones you see in my samples are both single images made with a composition of smaller images, but they behave as a single image within the slideshow.

[davej]

Well then perhaps your fellow Smugmug user knows how to set up this slideshow so that it is restricted to a particular div?

[dsonesuk]

.cb-slideshow,.cb-slideshow:after {position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index: -99999; }

 

Position fixed take it completely out of flow from other elements, you can place it anywhere, within the body and it will not take any space, also child elements within it are also taking out of the flow. Using height/width 100% will force it take up the full available width/height of browser window. IT does not move with content, even if the content has scrollbar to scroll up/down with.

 

IF you wish to bring into flow with the other elements, especially when the child elements are positioned absolute, you would use position: relative; the positioning of absolute elements is then relative to the outer edges of position: relative; parent element.

[Hadien]

without actually seeing the site itself we don't know enough to guarantee help. This is only an educated guess, but try and see how this change affects the layout. look for a section of CSS that almost matches whats defined below and change the width, height, top, and left to what I've written below.

.cb-slideshow,.cb-slideshow:after {     position: fixed;    width: 80%;    height: 80%;    top: 20%;    left: 20%;    z-index: -99999; }

be sure to save and then refresh the page (hold shift/ctrl just in case). it's a shot in the dark, so it may not do what you want.

 

EDIT: posted just a tad too late.

Edited October 26, 2013 by Hadien

[fabthi]

without actually seeing the site itself we don't know enough to guarantee help. This is only an educated guess, but try and see how this change affects the layout. look for a section of CSS that almost matches whats defined below and change the width, height, top, and left to what I've written below.

.cb-slideshow,.cb-slideshow:after {     position: fixed;    width: 80%;    height: 80%;    top: 20%;    left: 20%;    z-index: -99999; }

be sure to save and then refresh the page (hold shift/ctrl just in case). it's a shot in the dark, so it may not do what you want.

 

EDIT: posted just a tad too late.

Hi Hadien

your hint does work, I only had to fine tune the percentage of adjustment

Only the problem is that this way the slideshow doesn't shift down below the header but, on the contrary, the header overlays the slideshow and crop the upper portion of images.

[Hadien]

how about adding these two properties to that same CSS class?

background-repeat: no-repeat;background-size: auto 100%;

"auto 100%" should resize the image to fit, constrained to the height space you've allotted for it. if you flip those two to "100% auto" or just plain "100%", it will constrain itself to the width. Using "100% 100%" will force the image to stretch to the dimensions you've gave the element, which is most likely what you don't want (especially if some images will be in portait, not landscape orientation). play around with this a little and see which one you like the most the CSS is using position:fixed and height is set to a percentage, so image size (and possibly the cropping problem you're having) can also depend on how much screen space you've given to your browser. viewing this on a larger monitor, having the browser NOT set to fullscreen, or simply scrolling down if allowed can affect how the image will look. As dsonesuk said, position:fixed places the element relative to your viewport, not the page itself. So by scrolling down (if you can scroll down) the image will stay with you. setting background-size should help in fixing the cropping problem but the image might overflow into the header or overlap anything added later on in the page. position:absolute is another alternative but I'm unsure how that will affect other elements on the page. now if background-size isn't the answer, padding is a more-likely culprit:

padding-top: 20px;

you'll prolly need to mess with the amount to get the sweet spot. problem with using padding top is that the same padding value might not work for other images in the slideshow and so you may have to add padding on a case-by-case basis in the classes that define image's url. if all the images in the slideshow have the same widthxheight, then is won't be a problem

Edited October 27, 2013 by Hadien

[dsonesuk]

The reason the crop is happening is because the available dimensions is not adequate, and you are using background-position: 50% 50%; it is centring the image horizontal and vertical, any part of centred image beyond the available dimension edge will be hidden.

 

background-size: should help, but you would have to identify which image is landscape or portrait and apply appropriate class so correct proportional css styling is used, either manually or dynamically using JavaScript/jquery, also note background-size: only works for newer browsers and IE browsers above 9 I think? it maybe 10, just something to consider.

[fabthi]

how about adding these two properties to that same CSS class?

background-repeat: no-repeat;background-size: auto 100%;

I think it's important that I clarify that I'm going to use ONLY landscape images.

Thanks Hadien but where should I add the two lines of properties?

Or you rather mean I should amend these two lines?

background-size: cover;background-..............background-repeat: none;

Edited October 29, 2013 by fabthi

[fabthi]

Amending the two lines

background-size: cover;background-repeat: none;

in this way

background-size: auto 100%;background-repeat: no-repeat;

doesn't make any difference on the header issue and also slideshow is not full width any more

Edited October 29, 2013 by fabthi

[dsonesuk]

Look! the container holding the background images is fluid it will stretch to the available area OF the browser window, ALL browser windows are different because different menus/toolbars, status bars etc, this means the proportional size of ""landscape images"" will never be that of the container, meaning only a few people who have correct size monitor, same type of browser, with same ideal number of add on menus for those browsers, will see the whole picture without cropping, and fit to full width.

 

You can only get this to work if you can guarantee the container is of proportional size of the ""landscape images"" (which must be ALL the same size), AND of a size that will fit the browsers window/viewport available to it, this also means you WILL have to live with the container not being the correct size to show the slideshow at full width in some instances. UNLESS you allow the container to be of correct height, but allow container and background image (using background-size:) to stretch OUT OF proportion to fill the full width of browser window, which i don't think is what you want.

 

ALSO the text at bottom is not going to be seen in some browsers, as again in some instances because of tool bars etc. may be beyond the viewport area and out of view completely.

[fabthi]

Look! the container holding the background images is fluid it will stretch to the available area OF the browser window, ALL browser windows are different because different menus/toolbars, status bars etc, this means the proportional size of ""landscape images"" will never be that of the container, meaning only a few people who have correct size monitor, same type of browser, with same ideal number of add on menus for those browsers, will see the whole picture without cropping, and fit to full width.

 

You can only get this to work if you can guarantee the container is of proportional size of the ""landscape images"" (which must be ALL the same size), AND of a size that will fit the browsers window/viewport available to it, this also means you WILL have to live with the container not being the correct size to show the slideshow at full width in some instances. UNLESS you allow the container to be of correct height, but allow container and background image (using background-size:) to stretch OUT OF proportion to fill the full width of browser window, which i don't think is what you want.

 

ALSO the text at bottom is not going to be seen in some browsers, as again in some instances because of tool bars etc. may be beyond the viewport area and out of view completely.

 

Please bear with me dsonesuk, but this a bit too technical for me, as I said I have (very) limited skills of CSS.

How should I recognize in the code that "the container holding the background images is fluid"? And, most of all, how can I amend the code settings to make the container proportional to images size (please notice, I have all landscape images of the same size)??

As for text in the bottom, that's not really an issue as I was going to find a way to delete it.

Edited October 30, 2013 by fabthi

[dsonesuk]

If container use a percentage unit its fluid, using px would makes it fixed width.

 

To make the container proportionally correct, you need javascript/jquery to first check size of browser viewport, and then calculate the max height (minus top to show header) or width proportionally to your image, adjust to match proportions of landscape image exactly, and centre it, NOTE: it WILL not stretch to full width in most cases, UNLESS you buy every single person same size monitor, that only uses one browser (NOT IE), in which you cant adjust browser windows size in anyway.