Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2013
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post

    Inserting image behind 'Submit comment' button

    This should be a fairly simple thing, but I just need the code that would allow me to insert an image behind my 'Submit Comment' on posts and behind the 'send' button on my contact form. I figured out how to put the image behind it but it's cut off on the right side. If I make to text larger or all uppercase it expands it like I want, but when its normal it looks weird. Here's the original code:
    [CODE]
    }
    #commentform #submit, input.readmore, a.readmore {
    background:url(images/readmore.png) right bottom no-repeat;
    color:#2a2a2a;
    font-size:50px;
    text-transform:lowercase;
    font-family: 'Tangerine';
    border:none;
    padding-bottom:15px;
    }
    #commentform #submit:hover, input.readmore:hover, a.readmore:hover {
    background:url(images/readmore-hover.png) right bottom no-repeat;
    color:#417a30;
    text-decoration:none;
    [CODE]
    and here's the code with the inserted image:
    [CODE]
    }
    #commentform #submit, input.readmore, a.readmore {
    background:url(images/readmore.png) right center no-repeat;
    background:url(images/comment-background.png) left no-repeat;
    color:#2a2a2a;
    font-size:50px;
    text-transform:normal;
    font-family: 'Tangerine';
    border:none;
    padding-bottom:15px;
    }
    #commentform #submit:hover, input.readmore:hover, a.readmore:hover {
    background:url(images/readmore-hover.png) right bottom no-repeat;
    color:#417a30;
    text-decoration:none;
    [CODE]
    So my question is this; How to I change the parameters so that my image doesn't get cut off?

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,369
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by Throughtheivy View Post
    So my question is this; How to I change the parameters so that my image doesn't get cut off?
    background-size: contain will force a whole background image to be displayed at the potential expense of the whole background not being covered.

    background-size: 100% 100% will stretch the background image to force it to cover the whole element with the potential risk for distortions in the image.

    See http://dev.w3.org/csswg/css-backgrou...ackground-size.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    something like this?

    http://jsfiddle.net/8uE39/

  • #4
    New Coder
    Join Date
    Sep 2013
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post

    Resolved

    OH, thank you so much Arbitrator! It worked, though it did distort the image a bit like you said, but its OK because it actually looks alright The way my code was written out it put the image behind the 'Read more' button as well as the 'Submit comment' button. I didn't want that, so I re-wrote the code so that it didn't include the image behind the 'Read more' button Here it is for future reference for anybody who needs help with this kind of thing (like I did haha)
    }
    input.readmore, a.readmore {
    background:url(images/readmore.png) right bottom no-repeat;
    color:#2a2a2a;
    font-size:50px;
    text-transform:normal;
    font-family: 'Tangerine';
    border:none;
    padding-bottom:15px;
    }
    input.readmore:hover, a.readmore:hover {
    background:url(images/readmore-hover.png) right bottom no-repeat;
    color:#417a30;
    text-decoration:none;
    }
    #commentform #submit {
    background:url(images/comment-background.png) left no-repeat;
    background-size: contain;
    background-size: 100% 100%;
    color:#2a2a2a;
    font-size:50px;
    text-transform:normal;
    font-family: 'Tangerine';
    border:none;
    padding-bottom:15px;
    }
    #commentform #submit:hover{
    background:url(images/comment-background.png) right bottom no-repeat;
    background-size: contain;
    background-size: 100% 100%;
    color:#417a30;
    text-decoration:none;
    }

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,369
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by Grim View Post
    something like this?

    http://jsfiddle.net/8uE39/
    This demo doesn't work, probably because there's nothing at the URL http://lorempixel.com/output/sports-q-g-100-50-8.jpg. Given the slash character the server is adding to the end of the URL, I'd imagine that's due to a server misconfiguration.

    Quote Originally Posted by Throughtheivy View Post
    #commentform #submit {
    background:url(images/comment-background.png) left no-repeat;
    background-size: contain;
    background-size: 100% 100%;
    color:#2a2a2a;
    font-size:50px;
    text-transform:normal;
    font-family: 'Tangerine';
    border:none;
    padding-bottom:15px;
    }
    #commentform #submit:hover{
    background:url(images/comment-background.png) right bottom no-repeat;
    background-size: contain;
    background-size: 100% 100%;
    color:#417a30;
    text-decoration:none;
    }
    Worth noting that specifying background-size multiple times in a single rule serves no purpose here; the second declaration will override the first, so the contain declarations can all be deleted.

    You can also merge the background-size declaration into your background declarations if desired:

    Code:
    /* Long and Redundant #1 */
    background:url(images/comment-background.png) left no-repeat;
    background-size: contain;
    background-size: 100% 100%;
    
    /* Long and Redundant #2 */
    background:url(images/comment-background.png) right bottom no-repeat;
    background-size: contain;
    background-size: 100% 100%;
    
    /* Short */
    background: url("images/comment-background.png") 0 0 / 100% 100%;
    With background-size: 100% 100%, there's no point in specifying a non-default background position, so I changed that to 0 0. (You have to specify background-position when you specify background-size in the background property, unfortunately.) There's no need to specify no-repeat in such a case either. You should probably be specifying a background color though, just in case the image doesn't show up.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •