gloryshot-wrap image & size

  • Resolved davgoodvibes

    (@davgoodvibes)


    7 years, 3 months ago

    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 7 years, 3 months ago by tubegtld.
    Thread Starter davgoodvibes

    (@davgoodvibes)

    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;
}
    Thread Starter davgoodvibes

    (@davgoodvibes)

    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?

    Thread Starter davgoodvibes

    (@davgoodvibes)

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

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

    • This reply was modified 7 years, 3 months 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.

    Thread Starter davgoodvibes

    (@davgoodvibes)

    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.