Infinity theme images

[abbypanda]

On the front page, I'm having some trouble. The first image resizes for all mobile devices and looks great. The others do not and this is annoying: it causes them to not look good.
Please help me out. I want to insert a code to make all the background front page images resize for the device like the first image does. Starting with the dog with the sweater down, they dont and you cant read them on mobile
http://www.ArkansasPet.Photography

http://www.ArkansasPet.Photography

[abbypanda]

*to clarify widgets 1, 3, 5, 7 I want the background images to be fix width, that resize and maintain the whole image no matter what device you are on. I do not want the widget text area resized depending on what text is there.

[abbypanda]

anyone???

[abbypanda]

?

[Boblebad]

It's not easy, be course if you wanna "contain" the image, then it will only fit one screen size according to where it is widest or highest.

I just tried be course i thought i could be cool too, but it does not work. You can use the "contain" value on background-size, but when going from your big laptop screen to your smartphone, you're left with a lot of empty space that's filled with the background color of the page. And that does not look good in my opinion.

I just took the CSS from the "Front Page Sections" section in the style-front.css and put in under Media at the bottom:

.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7,
.front-page-9 {
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	-moz-background-size:    contain;
	background-size: contain;
}

I'm not sure about the webkit's "contain", but it shows the result anyway 🙂

[Author]

Posts