CODEWITHSUNDEEP
cssimagescaling
BL91
BL91

Reputation: 1

How to stop image from scaling when screen size changes

Right now my wordpress site is set up so the images scale when the screen size changes. I was hoping that, instead, the image can remain at a specific size in the center of the screen and become cropped equally on the left and right when the screen size changes.

I have tried max-width:none but that doesn't keep and crop the image in the center of the page.

Site: Zxndesignco.com

The image in question is the only image on the home page. I only know CSS so I was hoping there is a CSS solution.

Example of what i'm taking about: https://gatewaydemo.wordpress.com/

Thanks for the help.

Upvotes: 0

Views: 2915

Answers (2)

scoopzilla
scoopzilla

Reputation: 883

body{
  background-repeat:no-repeat;
	background-position:center center fixed;
	background-image:url(https://zxndesignco.com/wp-content/uploads/2016/12/HomeImg.jpg);
	background-attachment:fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  height: 100%;
  }
.white{
   font-size: 24px;
  color: #fff;
}
<div>
  <p class="white">Here are some words</p>
  </div>

Usually in the body or in a div. I like this group because it covers all the browser bases.

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53674

The general idea is to not use an image, and make that image the background-image of that hero section instead. So delete the img tag and add something like this CSS to .sow-image-container height: 400px; background: url(https://zxndesignco.com/wp-content/uploads/2016/12/HomeImg.jpg) center top; background-size: cover

Upvotes: 1

Related Questions