Grow your CSS skills. Land your dream job.

image repeat on screen max-width: 767px

  • J4B
    # February 13, 2013 at 8:24 pm

    Hello,

    I am here to ask for help, rarely done (that’s me asking for help, well not in the public domain)

    For the love of God, I have spent near on the last three hours trying to find a solution to this problem, I am really hoping someone can tell me what I am doing wrong, because for the love of God, I am extremely close to going mad.

    I digress, please find below issue

    I am making my site responsive, not issue with anything at all bar one problem

    I have a background image for the footer, ad this BG image is a problem when viewed at width 480px to 767px

    The problem is, the right side of the BG image is being cropped basically, its like margin or padding are being applied to the right side of the image, its not fitting the screen.

    I am fairly confident that the issue is viewport related, but how I resolve it, I can not figure out

    A brief synopsis of the site structure


    CSS

    body {
    background-color: #fff;
    color: #8f8f8f;
    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
    }

    .container {
    width: 940px;
    margin: 0 auto;
    }

    #footer-wrap {
    width: 100%;
    float: left;
    background: url(../img/ui/footer_bg.jpg) repeat;
    position: relative;

    }

    .footer-inner {
    width: 940px;
    margin: 0 auto;
    }

    Applied to the head


    Tried this within the media queries

    @media only screen and (min-width: 480px) and (max-width: 767px){
    #footer-wrap {
    width: 100%; }

    }

    And this also

    @media only screen and (min-width: 480px) and (max-width: 767px){
    #footer-wrap {
    width: 767px;} /*Just to even fit the screen*/

    I have tried adding negative margin to the right side of the wrapper container, has not worked.

    I am sure someone here will tell me how stupid I am being as how easy the fix is, well I am hoping that’s the case, cause I am sure its a straightforward issue to resolve, but not in my state of mind at the moment.

    I am hoping one of our American friends will help me, I am off to bed and will tackle this again first thing in the morning

    Thanks in advance

    John

    # February 13, 2013 at 10:14 pm

    I’m not really sure what the problem is. Do you have a link? Can you provide a screenshot of the problem?

    If you just want to center the background, you can just use `background-position: center center;’.

    But I’m just not really sure what the problem is!

    J4B
    # February 14, 2013 at 4:38 am

    The site is offline Doc, but of course I will throw it up on my server later and let you have a look, I have a fresh head on this morning, so I am sure with a little clarity I will resolve the issue ,and well then again maybe not.

    Let us know when you are online, I will check back this afternoon, and will forward you a link

    Thanks in advance

    John

    J4B
    # February 14, 2013 at 4:52 am

    Here is a life visual on a Samsung Galaxy Tab 10.1 …. Only happens in Portrait mode obviously, wont repeat problem in any tablet emulator, as to be expected

    footer_bg_zpsc6255fd1.jpg

    And a graphical representation of problem

    iPad_zps06a0fb0e.jpg

    If anyone else can shed some light, please do

    Cheers

    John

    # February 14, 2013 at 5:16 am

    I know this is probably a silly question but:

    #footer-wrap {
    width: 100%; /* not necessary…it will automatically be 100% wide */
    float: left; /* not necessary for a div that is 100% of the screen width */
    background: url(../img/ui/footer_bg.jpg) repeat;
    position: relative; /* Why? Unless you are positioning items absolutely inside it */
    }

    If the div is alway supposed to be 100% wide there would be no reason to change it in any media query.

    The INNER footer width maybe…but not the wrapper.

    J4B
    # February 14, 2013 at 5:29 am

    The width 100% was an after addition, yes originally it was not there, but I read online that the view port must see some size … I don’t 100% get it, regardless ,without the width attribute, I still have the problem, i even added the view-port size

    Float left is habit (I have tried without the float, no difference)

    Yes, I never added any condition within the media query originally, as you rightly say its 100%, with or without the 100% (as I said, originally I had no width parameter as it was just a repeat)

    I actually originally had

    #footer-wrap {
    background: url(../img/ui/footer_bg.jpg) repeat; }

    But I have tried everything, I have read online a magnitude of solution to similar issues, but none fix the problem

    I just don’t get it, its a BG image for christ sake that needs to repeat

    # February 14, 2013 at 6:03 am

    Repeat is the default option so you really don’t need it You could try it without it.

    However, it’d definitely the width that is causing the issue.

    Have you tried min-width:100% on the wrapper?

    # February 14, 2013 at 6:06 am

    I also assume that you have “device-width” meta line in your document ‘head’?

    J4B
    # February 14, 2013 at 6:49 am

    Hi Paulie

    Tried it with and without repeat. actually added a fixed height to the footer and tried repeat x on its own (why I don’t know but I was going a little mad last night)

    Yes, sure have “device-width”


    Tried with and without the scale, thought if they could zoom, it might help

    No was the answer

    J4B
    # February 14, 2013 at 6:49 am

    Going to try min-width:100%, haven’t tried that yet

    J4B
    # February 14, 2013 at 7:16 am

    Hallelujah …..

    Got it, the only thing I had not tried …. min-width:100% … Seems obvious, or then again not, either way, it worked

    Thanks a million for your help Paulie, very much appreciated

    Regards

    John

    # February 14, 2013 at 7:25 am

    Praise the Lord :P

    You are very welcome.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".