Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 30, 2015 at 10:44 pm #437835
    ignitionstudio

    I’ve enabled the shop banner and set unique banner images for my product categories and its appearing fine, however it looks as though the image is being stretched to fill both 100% of the width and height of the browser window and as a result, is cutting off a large portion of the images that I’ve created. How can I alter the CSS for these banners to just fill 100% of the width and not the height as well? It looks as if the CSS is added inline on the div tag.

    <div class="av-parallax avia-full-stretch active-parallax enabled-parallax " data-avia-parallax-ratio="0.3" style="background-image: url(https://site.com/wp-content/uploads/2015/04/image.jpg); background-attachment: scroll; top: auto; -webkit-transform: translate3d(0px, 170px, 0px); height: 356px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></div>

    May 3, 2015 at 12:35 pm #438497
    Günter

    Hi ignitionstudio!

    Thank you for using our theme.

    Can you give us a link to this page please? Then we can check and give you the correct CSS. You can post it here as a private reply.

    Cheers!
    Günter

    May 4, 2015 at 10:23 pm #439363
    ignitionstudio
    This reply has been marked as private.
    May 6, 2015 at 4:37 am #440088
    Rikard

    Hey!

    I’m unsure how you would like it to look like, but you can use this CSS if you want to try out yourself:

    .av-parallax.avia-full-stretch.enabled-parallax.active-parallax{
  top: auto !important;
  transform: translate3d(0px, 92px, 0px) !important;
  height: 372px !important;
  background-image: url(https://precisiongovernors-com.securec59.ezhostingserver.com/wp-content/uploads/2015/04/Actuators-bg2-1500x415.jpg) !important;
  background-attachment: scroll !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}

    Cheers!
    Rikard

    May 6, 2015 at 4:44 am #440090
    Ismael

    Hey!

    The background size is set to cover by default to keep the image proportion and image responsiveness but as a compromise, it will hide parts of the background image: http://www.w3schools.com/cssref/css3_pr_background-size.asp

    You can set the background size property manually but the alternative property might stretch or shorten the background image.

    .av-parallax.avia-full-stretch {
  background-size: 100% 100% !important;
}

    Cheers!
    Ismael

    May 6, 2015 at 4:19 pm #440426
    ignitionstudio
    This reply has been marked as private.
    May 7, 2015 at 8:34 am #440809
    Rikard

    Hi!

    It shouldn’t be trumped if you are using the !important statement at the end of each line? If you want to attach screenshot you can upload to for instance imgur.com or a public dropbox folder and then link to the images in your post.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.