Home Forums Weaver Xtreme Theme Image background color

Topic Resolution: Resolved
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #65380
    merlojh
    Participant

    How can I put a color behind the image SudVinBio in Gutenberg can I use css?

    Home

    John

    #65381
    scrambler
    Moderator

    If you mean the container

    .page-id-5 .wp-block-image {background-color:red;}

    #65383
    merlojh
    Participant

    I did not want the whole container just an area around the image in pixels can that be done? John

    #65388
    scrambler
    Moderator

    You mean a border?

    If so use a rule like below

    .page-id-5 .wp-block-image img {border: 2px solid red;}

     

    #65391
    merlojh
    Participant

    Yes a border around the image but it did not work? John

    #65392
    scrambler
    Moderator

    Not sure why, but change the rule to

    .page-id-5 .wp-block-image img {background:red;padding:10px;}

    #65394
    merlojh
    Participant

    did it this time thanks John

    #65401
    Weaver
    Keymaster

    Weaver has used background for image borders forever, and I don’t think borders will work at this point.

    #65403
    merlojh
    Participant

    It worked why do you say this looks fine on the site should I not use it? John

    #65405
    scrambler
    Moderator

    No John what weaver said is that he uses the same method to create a border as the last one I gave you, using a background an padding instead of an actual CSS border (the first rule I had you try).

    All is good 🙂

    #65408
    merlojh
    Participant

     

    Right got it thanks for the answers John

    #65414
    merlojh
    Participant

    You gave me this code for .page-id-5 .wp-block-image img {background:red;padding:10px;}

    It seems like every image I put on the page turns color can I  just do it to one image on the page instead all of them? John

    Home

    #65415
    scrambler
    Moderator

    You will need to go in the advanced settings of the block and give the block a specific class like myblock1

    Then change the rule to include the class selector like below

    .wp-block-image.myblock1 img {background:red;padding:10px;}

    Make sure there is no space bewteen the wp-block-image and the class selector .myblock1

    #65416
    merlojh
    Participant

    Thanks for the help John

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