Support » Theme: .TUBE » gloryshot-wrap image & size

  • Resolved davgoodvibes

    (@davgoodvibes)



    Hello,

    First of all, I already reduced to the size I want by adding this in CSS

    body.home .gloryshot-wrap {
        height: 200px;
    }

    I uploaded an image (2560px*200px) to use as “gloryshot-wrap banner”
    I’m trying to arrange to not have a stretched image, but not luck till now.
    As you can see the image is always zoomed/stretched. How to fix that, please ?

    Kind regards,
    Dav.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author tubegtld

    (@tubegtld)

    You’ll need to adjust the CSS attributes below…

    .gloryshot-wrap:before {
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: center center;
    }

    Details here…
    https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
    https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
    https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

    Please mark as resolved if this does the trick for you.

    • This reply was modified 10 months, 4 weeks ago by  tubegtld.

    Thanks for your reply.
    I tried to fix it with what you said … without success :/

    My CSS level : 2/10

    Theme Author tubegtld

    (@tubegtld)

    Not 100% sure what exactly you’re going for here.

    Try this maybe…

    .gloryshot-wrap:before {
        background-repeat: repeat;
        -webkit-background-size: 2560px 200px;
        -moz-background-size: 2560px 200px;
        -o-background-size: 2560px 200px
        background-size: 2560px 200px;
        background-position: center center;
    }

    Thanks for your help and efforts.
    I tried your proposition without luck.

    .gloryshot-wrap:before {
    	background-repeat: repeat;
    	-webkit-background-size: 2560px 200px;
    	-moz-background-size: 2560px 200px;
    	-o-background-size: 2560px 200px;
    	background-size: 2560px 200px;
    	background-position: center center;
    }

    I don’t know what to do to fix it.

    Theme Author tubegtld

    (@tubegtld)

    I don’t know what to do to fix it.

    Well that makes two of us πŸ™‚

    Can you please try to describe in greater detail what you’re hoping to achieve?

    Or, link to another site that’s doing what you want?

    I just try to make the same as your demo but with
    an image heigh 200px maximum like this image :

    .Tube-Demo.jpg :
    http://www119.zippyshare.com/v/Dhtda8HI/file.html

    • This reply was modified 10 months, 3 weeks ago by  davgoodvibes.
    Theme Author tubegtld

    (@tubegtld)

    These two together seem to do exactly what you’re looking for assuming you (a) have a 2560x200px image and (b) you want it to be “actual size” no matter the viewport…

    body.home .gloryshot-wrap {
      height: 200px;
    }
    
    body.home .gloryshot-wrap:before {
      background-repeat: repeat;
      -webkit-background-size: 2560px 200px;
      -moz-background-size: 2560px 200px;
      -o-background-size: 2560px 200px;
      background-size: 2560px 200px;
      background-position: center center;
    }

    Also, there’s no longer a hero image on your sample URL so I can’t really “test” this.

    It work !! THANK YOU !
    Have a nice day πŸ˜‰

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘gloryshot-wrap image & size’ is closed to new replies.