Parallax Pro Background Image Responsiveness

[Dan]

Hi everybody,

I'd like the background images in my featured images section on the homepage of my website to be responsive. Right now, on a mobile device, it just shows a very small square of my photo rather than adjusting the size to incorporate all or most of the picture.

Any way to solve that?

Thanks.

http://www.manifestancestry.com

[jrricker]

Hey Dan, how do you get the transparent background behind the text and I'm front of the background photo on your site?

Can you send the code that makes that possible?

Thanks,
JR

[Jason Weber]

Hey jrricker.

This can be accomplished by adding the following to your style.css (or, preferably, if you have a plugin that allows for custom CSS):

.home-odd .wrap {
background: rgb(40, 80, 229) transparent; /* whatever color you choose */
background: rgba(40, 80, 229, 0.4); /* change the opacity -- 0.3 would be lighter, 0.6 would be darker */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#2850e5, endColorstr=#2850e5) ;
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#2850e5, endColorstr=#2850e5)” ;
}

This way, it's cross-browser compatible with a fallback for IE8 and below.

Hope this helps!

---

Webby’s WebPrezence
National Center For Due Process

[rayman]

Did anyone have a solution to the original question - to make the background images responsive?

[braderz31]

Not sure if anyone still needs to do this but I was able to amend the positioning of my background images with this media query

@media only screen and (max-width: 1140px) {

	.home-section-1,
	.home-section-3,
	.home-section-5 {
		background-size: cover;
		background-position: left;
		
	}
}

Obviously you can amend the background size and position to suit.

[TheRealCaseyChoate]

I desperately need a fix for this. I used only pictures on my home page and put a lot of time and effort into it. I tried braderz31's suggestion, but it doesn't work. It still only shows a small portion of the image instead of shrinking the whole image.

Any help would be greatly appreciated.

http://TheRealCaseyChoate.com

[ceah]

Sridhar shows how to do this in the Minimum Pro theme

Setting up a responsive image in place of background in Minimum Pro

I just asked him how to apply this to Parallax Pro. If he answers, I will link to it for you.

[Dan]

That'd be great. I appreciate it.

[spiezz]

Hi,

I've implemented the @media code and still no response. I tried to use the info on the Minimum Pro theme page, but the php didn't match exactly so I was hesitant for fear of breaking the site.

Background images for the .home-odd sections do not respond/resize on mobile.

Did anyone on this thread actually find a solution or just abandon parallax pro?

Thanks
Karen
piKziL.com

[blogwithben]

Hi there,

I'd LOVE for my home section images to be responsive as well. Is there any update on this?

Thanks,

Ben

[mocherob]

I need this as well. I've sent a support ticket to StudioPress. They sent me a first response really side-stepping the issue basically suggesting that I change the image and set an out of focus image as the background, one with no true focal point. Well I want to make my image responsive. They have not yet responded to my follow up question. So no fix here on that yet?

[davidd]

Thanks for keeping this issue at the top of the list. This seems to be a common one. I've seen it in at least 15 other posts with no solution. braderz31's idea is as close as I can get, but it doesn't work on phones. Any heroes out there?

Even a snippet for replacing the images on smaller screens would be nice, but it would be better if some good 'ol (new) css would do the trick.

[Dan]

Still no progress that I've heard of. Disappointed in StudioPress. This is clearly a significant issue for a lot of people--should be addressed.

[davidd]

Here are some hints about the issue. https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/

[davidd]

Holy Toledo, I played and played and this is what I did that worked for my case. I'm sure this shows the clown shoes, but it seems to be working okay.

@media only screen and (max-width: 768px) {
	.home-section-1,
	.home-section-3,
	.home-section-5 {
		background-attachment: scroll;
		background-position: top;
		-webkit-background-size: 200% contain;
		-moz-background-size: 200% contain;
		background-size: 200% contain;
  	}
}

[davidd]

Heres' the site http://emily.viewfarm.com/

I also did this totally goofy thing that seems to have worked.

@media only screen and (max-width: 1140px) {
	.home-section-1,
	.home-section-3,
	.home-section-5 {
		background-attachment: scroll;
		background-position: top;
		-webkit-background-size: auto contain;
		-moz-background-size:    auto contain;
		background-size:         auto contain;
  	}
}

[Sher]

Well I got my own Frankenstein thing going on after reading this thread. This is working for me, at least it's good enough so I can move on...

Placed this inside any @media sections needed...

.home-odd {
background-attachment: scroll;
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
-o-background-size: 100%;
background-height: 100%;
background-width: 100%;
background-position: top;
background-repeat: no-repeat;
background-color: #333;
}

[Author]

Posts