image repeat on screen max-width: 767px

[J4B]

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

[TheDoc]

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]

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]

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

And a graphical representation of problem

If anyone else can shed some light, please do

Cheers

John

[Paulie_D]

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]

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

[Paulie_D]

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?

[Paulie_D]

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

[J4B]

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]

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

[J4B]

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

[Paulie_D]

Praise the Lord :P

You are very welcome.

[Author]

Posts