Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at contact@userstyles.org.
Changing your Avatar.
The only way to currently change a forum avatar is through Gravatar.com. The email address used for your Userstyles.org account must be one of the email addresses that is registered to your Gravatar account.

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.