Header image/banner/featured image having its sides cropped
-
On my home page (welcome tab) of my site I want a very wide, panoramic style image but it’s being cropped on the sides when I try. The original image is 10,000 x 2,441px. At first I though it was probably just due to the huge size of the file so I tried again with a compressed version of 3,000 x 732px but it still does this.
Here is the origional image file:
http://i.imgur.com/lZ80HtX.jpgHere is my blog, and what I am talking about:
http://www.benjaminweir.orgAnd here is a photoshop version of what I’m trying to achieve:
http://i.imgur.com/2bRuV52.pngAny help would be greatly appreciated.
The blog I need help with is: (visible only to logged in users)
-
Hello! The problem is not your image but your theme. Add this code if you have the Custom CSS option that comes with having a WordPress.com Premium and Business plan.
.site-content {
padding: 0px;
} -
-
Maybe I put it in wrong… I already have some custom CSS so do i just paste this in with a line gap between? This is what I have:
.single .content-area, .page .content-area, .search .content-area { float: none !important; padding: 0 0 3.75em; width: 70%; } .site-content { padding: 0; } -
-
Thank you, this has helped a little but its still cropping a fair amount off the sides, you can see what I am try to achieve here:
-
Hi! I just checked it again. Try adding this code as well. Tell me if this works!
.site-content {
padding: 0px !important;
max-width: 100%;
} -
-
Have you tried using adding !important to the max-width?
.site-content {
padding: 0px !important;
max-width: 100% !important;
} -
Still cropping :(
Here is the following that I sent to someone else for help too. It better shows the issue that occurring on two different monitor sizes:
Here is what my home page looks like on two monitor sizes:
1600 x 1200:
http://i.imgur.com/QrHZf24.jpg2560 x 1440:
http://i.imgur.com/ZeVkoaF.pngHere is the original image file which is 10,000 x 2441px:
http://i.imgur.com/lZ80HtX.jpgAnd here is what I’m trying to achieve (i made these two in photoshop to illustrate what im aiming for) on the same two screen resolutions I previously showed:
1600 x 1200:
http://i.imgur.com/2bRuV52.png2560 x 1440:
http://i.imgur.com/byA7yq7.pngAs you can see in the first two screenshots (particularly the one of the larger screen) the header image is WAY too large and reduced in quality and I’m unable to find an answer anywhere on how to stop this happening. Its less of an issue on screens with a taller ratio, such as the second image (1600×1200) but none the less its still over the top and I’d really like to achieve what I showed in the 3rd and 4th image which are photoshopped.
-
Thank you so much for the information!
After doing some research I believe the issue is a theme specific problem. The theme’s featured image size is set to 1200 wide by 635 high. This is why the image is getting cropped.
Melody is a premium theme so they have their own forum.
https://premium-themes.forums.wordpress.com/forum/melody
I would suggest reposting your question there.
Another option would to be resize your image to fit the dimensions. You could add white space above and below the image in photoshop to create a similar look.
I hope this helps! If you have any additional questions feel free to ask. :)
-
-
Hey there,
I hope you don’t mind me jumping in to help. The problem I see is that the image you’re working with is already cropped by the theme. You can see that in its URL — note the &crop=1 at the end?
If you want to display an uncropped version of it, you’ll need to hide the cropped one:
.home .attachment-post-thumb { display: none; }Then add an uncropped version back in as a background image somewhere.
I’m not sure whether you’re using .intro-block for anything, but here it is fixed up with a background image in it:
.home .intro-block { background-image: url(https://benjaminweirblog.files.wordpress.com/2017/04/twisted-glass-render-multi-and-sat-ultra-wide-jpeg.jpg?w=1800); background-repeat: no-repeat; background-position: center top; background-size: cover; min-height: 7em; }You will need to test that on different screen widths and make sure it all looks good. One issue I noticed is that smaller screens lose the space between that block and the text below it. So you could add something like this:
@media screen and (max-width: 959px) { .home .intro-block { margin-bottom: 2em; } }Also note: with that CSS, you’re still going to get cropped sides on small screens, but frankly, if you try to display the full-width image on a small screen, it’s too “short” to see very well anyway.
Hope that gives you a good start. :)
-
Everything about this worked perfectly the first time, I didn’t have to alter any of your CSS. Thank you so much for you help! :) Have a great day!
-
WAIT hahah I take that back, its appears fine while in the CSS editing page but when I come out of editing mode the image is simply not there?!
-
-
Ah, try heading to Customize > Theme Options > Intro text.
Add some text, or this:
Then save your changes.
-
-
- The topic ‘Header image/banner/featured image having its sides cropped’ is closed to new replies.
WordPress.com Forums 
