1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Need someone to make background-image responsive

Discussion in 'Hire a Freelancer' started by acapitalTee, Dec 13, 2013.

  1. acapitalTee

    acapitalTee Power Member

    Joined:
    Dec 20, 2012
    Messages:
    574
    Likes Received:
    228
    I'm looking for someone to help with making a background image responsive. I am using the background image in my content area in wordpress. I need for the image to resize itself depending on the browser dimensions.

    If you can do this please reply here or send me a pm with how much you charge to do this.
     
  2. Mnet17

    Mnet17 Junior Member

    Joined:
    Feb 28, 2013
    Messages:
    192
    Likes Received:
    135
    Location:
    Philadelphia
    Supposed you are using Twitter boostrap

    Code:
    <div class="container">
    <div class="row">
    <img src="something" alt="" style="width: 100%"/>
    </div>
    </div>
    
    If you are using boostrap then set the width 100% makes that image responsive
     
    • Thanks Thanks x 1
  3. acapitalTee

    acapitalTee Power Member

    Joined:
    Dec 20, 2012
    Messages:
    574
    Likes Received:
    228
    Thank you mnet17. I am not using twitter bootstrap but I think I get the general idea.

    This is the css code I'm using for my background image to show on content area
    #content { background-image: url("http://my-img.png") !important; }

    Where would I put the width?
     
  4. Game On

    Game On Regular Member

    Joined:
    Aug 31, 2013
    Messages:
    355
    Likes Received:
    32
    #content {
    background-image: url("http://my-img.png") !important;
    background-size:100%;
    }

    If you still have any queries, just shoot me a PM.
     
    • Thanks Thanks x 1
  5. sukataetumba

    sukataetumba Senior Member

    Joined:
    May 25, 2010
    Messages:
    1,109
    Likes Received:
    213
    Here is an example of a responsive background with text on it

    Code:
    .whatever{
        display:inline-block;
        background:url(/wp-content/themes/yourtheme/images/image.png) no-repeat;
        background-size:100%;
        background-position:center;
        color:#000000;
        font-size:25px;
        font-family: 'Oswald', sans-serif;
        text-shadow:0 1px 1px #fad917;
        text-transform:uppercase;
        text-align:left;
        padding:0 60px 0 20px;
        line-height:60px;
        margin:30px 0 20px 0px;
    }
    
     
    • Thanks Thanks x 1
  6. acapitalTee

    acapitalTee Power Member

    Joined:
    Dec 20, 2012
    Messages:
    574
    Likes Received:
    228
    Thanks to everyone for the replies.

    I used the css from sukataetumba's post and it worked perfectly. Thanks so much!
     
  7. sukataetumba

    sukataetumba Senior Member

    Joined:
    May 25, 2010
    Messages:
    1,109
    Likes Received:
    213
    glad I could help, I ran into the same situation so I had to learn it haha
     
  8. Tensegrity

    Tensegrity Jr. VIP Jr. VIP Premium Member

    Joined:
    Apr 22, 2009
    Messages:
    1,823
    Likes Received:
    968
    There may be a problem with using background-size as it may end up having some margin if the browser is at certain sizes. You should check how it looks in various formats. If you're still having a problem let me know as I have a javascript code I can send you that works very well in these instances.
     
  9. artizhay

    artizhay BANNED BANNED

    Joined:
    Nov 21, 2010
    Messages:
    1,867
    Likes Received:
    1,335
    CSS is not a good solution for this due to some browsers not supporting the background-size property. Try the Backstretch JS script.
     
    Last edited: Dec 14, 2013
  10. sohom

    sohom Senior Member

    Joined:
    May 26, 2013
    Messages:
    981
    Likes Received:
    175
    Location:
    not in Past
    good
    many nice share :)