Adjust Size of background image for iPhone – iPad and the like

[Alberto Brusa]

Hello Bill,

Is there a way to adjust the size of the background image on smaller screens?
The site works quite nicely in a pc but when taking it to smaller screens the image that appears seems very large…

Thanks in advance.

Alberto

[Victor Robert Farrell]

Yes. I am having the same problems mate.. Put a new background image on the home page and its not responsive to re sizing
http://www.poetry.coffee

[Bill Robbins]

Great question. Some images work well being cropped resized down, especially ones where the main focus is in the center of the image. But you can specify a specific image for smaller screen sizes.

I would recommend installing a plugin called Style Buddy. It adds a box to every page/post where you can add in custom styling. Once that plugin is activated, edit the page where you’d like to have a separate image. Go to the styling box that the Style Buddy has added for you and paste this there:

@media only screen and (max-width: 768px) {
	
	body.image #hero-section {
		background-image: url(https://yoursite.com/tablet.jpg);
	}
	
}

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

	body.image #hero-section {
		background-image: url(https://yoursite.com/phone.jpg);
	}

}

That will create an opportunity for you to have a separate image for you tablet sized displays and phone ones. To add the specific images, upload them in your media library. Once the upload is complete, click the edit link. On the screen that opens up, look on the right hand side for the file URL. Copy that URL and then replace either the http://yoursite.com/tablet.jpg or http://yoursite.com/phone.jpg depending if it’s for a tablet or phone and then update your page. That should let you replace the image in the correct screen sizes.

If you don’t need a separate phone size, you can delete the bottom style.

Let me know if you have any questions,
Bill

[Author]

Posts