Notice: To Install styles, click the "Show Css Code" button first. The install button will work after that.
The devs are no longer actively involved in the forum, so any bug reports regarding the extension or website should be sent to them directly at contact@userstyles.org.

Replacing image : My image appears twice + doesn't fit when I reduce window's size

Hello,
I feel desperate about finding a solution to this issue.

I used this tip that works very well to replace a same size image by another one in CSS.
https://css-tricks.com/replace-the-image-in-an-img-with-css/

But, I find an issue when I try to replace an image by a bigger one.
I took screenshots.
Before : https://i.imgur.com/bRXjxPc.png
The original picture size : 643 x 199 (when the window is wide open)
Once it resized it automatically changes (It must be a "responsive" result)
After :https://i.imgur.com/c04mnNF.png
Do you see ?
My image appears twice and I don't know if it's possible to auto resize when you don't have access to HTML sheet.
Is it possible to do something ?
My code https://pastebin.com/c3U0B3HK

Thank you !

Comments

  • What happens if you get rid of the border-box sizing and use the "simple trick"?

    And what do you mean by responsive? Do you need continuous resizing or just resizing at breakpoints (@media queries)

  • What happens if you get rid of the border-box sizing and use the "simple trick"?

    And what do you mean by responsive? Do you need continuous resizing or just resizing at breakpoints (@media queries)

    Hi.
    Yes I mean continuous resizing (sorry, I'm not used with dev language).
    I tried the simple trick, with this following code.

    section.aside img[src="/images/radio_banner.png"]
    {
    height: 0 !important;
    width: 0 !important;
    /* these numbers match the new image's dimensions */
    padding-left: 218px !important;
    padding-top: 211px !important;
    background: url(https://i.imgur.com/dZ1ytcU.png) no-repeat !important;
    background-size: 100% 100%;
    }
    Image repeated issue has been fixed, but not the continuous resizing.
    The size remains the same.
    https://i.imgur.com/tQPaeLF.png
  • edited December 2017 Firefox

    I don't know a solution to replace flexible html img by css background.
    I can also just experiment. You might set up a fiddle for experimenting.

  • I think that there is no solution.
    I give up.
    Thank your for answering my question stonecrusher.
    Nobody helped me elsewhere =((
  • Yeah it might be impossible, at least I don't know a solution and some searching also didn't bring the desired solution :-(
Sign In or Register to comment.