infinity pro theme background image

[robbydl]

Hello,

On the infinity theme they use a background image in widget om the front page.
This image is not mobile friendly. It doesnt resize on smaller screens. Anyone know how to do that?

https://my.studiopress.com/themes/infinity/#demo-full

[Brad Dalton]

You can modify the default CSS so it works the way you want at any screen width width your image.

.front-page-1 {
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

https://www.w3schools.com/css/css_background.asp

You could also use a different image to be displayed on mobiles at any screen width.

---

Tutorials for StudioPress Themes.

[robbydl]

Thanks for the update, but is this in the style-font.css file? And does it matter where i put it?

[Brad Dalton]

That's the default CSS already in the front page style sheet.

You can inspect the element or take a look in your theme files.

---

Tutorials for StudioPress Themes.

[robbydl]

Thanks for your feedback.
I am seeing this allready.
Why doesnt it resize the image then?

`/* Front Page Sections
---------------------------------------------------------------------------- */

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

.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {
border-top: 73px solid transparent;
margin-top: -73px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
position: relative;
z-index: 9;
}

.front-page-1 .wrap,
.front-page-2 .wrap,
.front-page-3 .wrap,
.front-page-4 .wrap,
.front-page-5 .wrap,
.front-page-6 .wrap,
.front-page-7 .wrap {
margin-left: auto;
margin-right: auto;
max-width: 1280px;
padding-left: 20px;
padding-right: 20px;
}

.front-page-2 .widget-title,
.front-page-3 .widget-title,
.front-page-4 .widget-title,
.front-page-5 .widget-title,
.front-page-6 .widget-title,
.front-page-7 .widget-title {
font-family: 'Cormorant Garamond', serif;
font-size: 48px;
font-size: 4.8rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}

[Author]

Posts