Background image not scaling responsively

ifdc1974 · Member · Oct 8, 2014 at 4:32 pm
Copy link

Add topic to favorites
Hello,

My background is not scaling responsively. When I look at it and try to scale it on my desktop browser, it does correctly but when I go to my iPad or iPhone it does not work.

Here is the link to the webpage:

http://ifdcorg.wordpress.com/2scale/

It is the last background image with text titled Supporting Agribusiness Clusters

Here is my CSS.
```
.section-background-two {
	background: url('//ifdcorg.files.wordpress.com/2014/10/2scale_market_new.png') no-repeat;
	z-index: 1;
	min-height: 1172px;
	width: 100%;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
}
```
Thank you .

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 10, 2014 at 3:03 am
Copy link
You are using background-size: cover. Here is the description of what cover does:

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

The browser will always try and completely cover the area the image is in without distorting the image (keeping proportions).

Here is the description for background-size: contain:

Scale the image to the largest size such that both its width and its height can fit inside the content area.

While contain will keep the full image width visible, it will mean that the image height will reduce to keep the image proportions as the browser window is narrowed or it is viewed on smaller devices such as tablets or phones. This will make it a challenge to have your text stay centered vertically on the image.

This is sort of a “hack” but without completely rewriting your entire page content, it is the best I can do.

1. Remove all the breaks and the empty paragraph you are using to align the text vertically.
2. Inside the .section-background-two div in the page, wrap all the text in another div called .section-background-text. This allows us to locate the text independently of the image.
3. Replace your .section-background-two rule with the following new rule:
```
.section-background-two {
background:url('//ifdcorg.files.wordpress.com/2014/10/2scale_market_new.png') no-repeat;
	height: auto;
	min-height:972px;
	width:100%;
	overflow:hidden;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:top center;
	-webkit-background-size:contain;
	-moz-background-size:contain;
	-o-background-size:contain;
}
```
4. Add the following rule which controls the position of the text over the image.
```
.section-background-text {
    margin-top: 25%;
    margin-bottom: 50px;
}
```
See how that works out.
ifdc1974 · Member · Oct 10, 2014 at 1:54 pm
Copy link
Thanks. It kind of works but the image doesn’t span the entire window and I like how when you scrolled before, it gave a parallax effect.
ifdc1974 · Member · Oct 10, 2014 at 3:07 pm
Copy link
Ok. I re-added the background-attachment rule for the parallax effect but still working on width.
ifdc1974 · Member · Oct 10, 2014 at 4:42 pm
Copy link
How can I get the width to span the entire window like it was before?
thesacredpath · Member · Oct 10, 2014 at 5:45 pm
Copy link
Change background-size back to “cover in all the background-size declarations to return it to what it was.
ifdc1974 · Member · Oct 10, 2014 at 6:06 pm
Copy link
But them I’m right back to where I started :(
thesacredpath · Member · Oct 10, 2014 at 11:31 pm
Copy link
With contain, I’m seeing your image full width in Safari, Chrome and Firefox. Here is a screenshot of what I am seeing: https://cloudup.com/cO7WDT9-lw8/f .
thesacredpath · Member · Oct 10, 2014 at 11:32 pm
Copy link
Are you seeing something different?
ifdc1974 · Member · Oct 11, 2014 at 4:40 am
Copy link
Hi Yes,

I need it to scale for smartphone and tablet. I guess I need to do a media query for that correct?
designsimply · Member · Nov 15, 2014 at 4:54 pm
Copy link
First, just to document the problem a bit more clearly, I tested the http://ifdcorg.wordpress.com/2scale/ page with an iPad 3rd Gen (Retina) and an iPhone 5S just now and here is what I saw:

iPad – https://cloudup.com/c6ejkqLXbtj
iPhone – https://cloudup.com/cc0U4KsaZR6

I need it to scale for smartphone and tablet. I guess I need to do a media query for that correct?

Actually, there’s a problem in this case. Using “background-attachment” causes problems in iOS. I spent some time researching this, and here is the best explanation I could find:
http://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7

The second solution proposed is not an option for you here at WordPress.com because we currently do not allow you to add your own JavaScript. The first solution proposed removes the parallax effect, and that appears to me to be the best solution for this case due to the limitation of the iOS browser.

Here is a rule you can add to turn the “background-attachment: cover” rule back off for device widths that are 1024px or smaller, which should help with both iPhone and iPad:
```
@media screen and (max-device-width : 1024px) {
	.section-background-two {
		background-attachment: scroll;
	}
}
```
I suggest adding that just after your “.section-background-two” where you set “background-attachment: cover” so those rules stay close together so they are both easy to spot later if needed when editing CSS.
ifdc1974 · Member · Nov 17, 2014 at 3:07 pm
Copy link
Wonderful thanks. This is also what I was thinking but wasn’t sure how to code it.

No items found.