Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 25, 2020 at 4:42 pm #1263029
    nullhorn

    Hello,

    is there any opertunety to lay a svg over the media element fullscreen slider?
    I want my logo over every picture that slide in that slider.
    Yes, I tried to save it in the picture but the quality is not so good when I do this with a vector data.

    Thanks a lot
    Flo

    November 25, 2020 at 5:10 pm #1263033
    Guenni007

    you can have a before pseudo container on every selector you like. The before content is set to empty: content: ""
    and then a background-image your svg etc. pp. if you need detailed advice – it will be better to have a concrete link to your page.

    November 25, 2020 at 5:39 pm #1263042
    nullhorn

    Hello again,

    here is my page: https://wp.flo-haaf.de/
    You can see what I mean, the logo at the top slider is not really good quality (save @ photoshop for web @65% as a jpg – 250kb)
    Tell me, what should I do?

    November 25, 2020 at 6:57 pm #1263057
    Guenni007

    f.e. for your quick css:

    .avia-slideshow-inner li::before {
    background-image: url(https://webers-testseite.de/wp-content/uploads/Logo-animiert-2.svg);
    background-size: 50vw;
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-position: center;
}
    November 26, 2020 at 7:05 am #1263194
    Rikard

    Hi,

    Thanks for helping out @guenni007, did you try that out and did you have any luck with it @nullhorn?

    Best regards,
    Rikard

    November 26, 2020 at 8:41 am #1263204
    nullhorn

    Mmh, yes, no, partially.

    When I use the css snippet, than the svg is showing at the slider.
    But not in the center/center of the slider.
    The svg is 100% height. And when I change it to 50% height than the svg is in the left top of the slider.
    You can see what I mean.
    https://wp.flo-haaf.de/
    I think I can remember, is this not a everytime problem of css – to center a graphic in the horizontal?

    November 27, 2020 at 8:32 pm #1263576
    Guenni007

    I think I can remember, is this not a everytime problem of css – to center a graphic in the horizontal?

    : not at all ;)

    so I don’t know where you tested it, maybe you should empty the cache of all involved systems, but on 4 of the browsers I use so your svg is centered.
    You might not use a relative unit of measurement for the size of your svg, but set the background size to a fixed value (350px)
    – or background-size : contain

    November 28, 2020 at 7:12 am #1263659
    nullhorn

    Hello again,

    what I mean is, when I use your code 1:1 than I get a svg logo that is veritcal center but 100% height.
    Thats not what I want. So I tried it with changing the height: 100%; to 50%,
    but then the logo went to the left border – not so good.
    My second step was to change the background-size: 50vw; to 30vw,
    and now the logo is center/center horicontal/vertical.
    At the desktop it looks perfect, at the smartphone not so – its to small, but its ok.

    Or what else can I do? Can you understand what I mean, otherwise I must write it in german.

    thx
    flo

    November 28, 2020 at 7:30 pm #1263693
    Guenni007

    the parameter to change is only background-size
    the (pseudo-) container itself had to stay on 100% (height and width) ( that is the exact dimension of the parent container)
    you can play with different values relative or absolute values.
    you can try :
    background-size: contain ( or cover )
    or – if you like to have it perfect – you can set different values for different screen-width ( media-query rules)

    try first : background-size: contain
    maybe thats what is best.

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