Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 20, 2018 at 5:15 pm #1024364
    womenindharma

    Hi there,

    I’m trying to add an image as the background for a button. I added a custom css class and this code to quick css:
    .custom-button {
    background-image: url(https://womenindharma.com/wp-content/uploads/2018/09/Gold-button.jpg);
    background-repeat: no repeat;
    }

    The background shows up which is great but it covers way more than the button itself. My button is centered but the background image starts all the way at the left outside the button borders.

    How do I get the background image to “crop” or resize to fit exactly within the borders of the button?

    Thanks,
    Megan

    October 22, 2018 at 6:00 am #1024669
    Rikard

    Hey womenindharma,

    Where can we see the results you are getting?

    Best regards,
    Rikard

    October 23, 2018 at 12:09 am #1025187
    womenindharma

    Hi Rikard,

    Here’s a screenshot:
    https://drive.google.com/file/d/1ITTmUgvddKOW68DJ417zgX1cI96wHhj9/view?usp=sharing

    I also did some searching and made modifications to the quick-css code. Now we’re using this:

    .custom-button {
    border-radius: 3px;
    background-image: url(https://womenindharma.com/wp-content/uploads/2018/09/Gold-button.jpg);
    background-repeat: repeat-x;
    background-position: 0 0;
    padding:10px;
    font-size: 12px;
    text-decoration: none;
    display:inline-block;
    border-style: solid;
    border-width: 1px;
    margin:3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: 600;
    text-align: center;
    max-width: 100%;
    }

    What can I edit so the button is aligned in the center and the background image doesn’t extend past the button borders?

    Thanks!

    October 23, 2018 at 8:59 pm #1025618
    Victoria

    Hi womenindharma,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    October 24, 2018 at 12:42 am #1025704
    womenindharma

    Sure. I haven’t launched the button though because it doesn’t look good. I’ve only tested the custom css in preview mode. It’s called ‘custom-button’.

    The page I want to use the button style with the background is womenindharma.com/thecircle.

    I posted temporary admin credentials below if you need to look at the backend.

    October 25, 2018 at 12:12 pm #1026316
    Nikko

    Hi womenindharma,

    Thanks for giving us admin access.
    I have replaced:

    .custom-button {

    with:

    #top .custom-button > a.avia-button {

    I have already purged the page but I need to clear the browser cache (ctrl + f5) for it to show properly on my page.
    Let us know if you need further assistance.

    Best regards,
    Nikko

    October 29, 2018 at 9:10 pm #1027750
    womenindharma

    this is perfect, thank you so much!

    October 30, 2018 at 8:48 am #1027901
    Nikko

    Hi womenindharma,

    Glad that we could help you :)
    Feel free to comeback if you need further assistance.
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Background image for button not working’ is closed to new replies.