Jump to content

fabthi

Members
 View Profile  See their activity

  • Posts

    19

  • Joined

  • Last visited

 Content Type 

Posts posted by fabthi

    Slideshow in homepage - how to fix the positioning

    in CSS

    Posted · Edited by 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.

    Slideshow in homepage - how to fix the positioning

    in CSS

    Posted · Edited by 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;

    Slideshow in homepage - how to fix the positioning

    in CSS

    Posted

    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.

    6sbd.png

    Slideshow in homepage - how to fix the positioning

    in CSS

    Posted

    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.

    Slideshow in homepage - how to fix the positioning

    in CSS

    Posted

    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)
    enw9.png
    And this is how it looks like once the CSS code is added
    iwot.pngSo 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

×
×
  • Create New...