fabthi

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.

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

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;

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.

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.

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