home page images

[Aaron Tullman]

Hi Bill,

The images I’m using on my home page keep getting cut off. I’ve played aound with them, nad I got the best results by sizing them to 500 pixels high. Te sections are set to 500 pixels. I also added in:
div.picture-block {
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}

However, the tops are still getting cut off. Do you have any suggestions? http://digedu.wpengine.com/

Thanks!

[Bill Robbins]

Aaron,

There are a couple of things you might try. You could set the header to scroll. That way it won’t cover up the top of the “window” that the images are appearing through.

The other thing you could do is change the background position of the blocks. To do that, you would add something like this to your Custom CSS box:

div.picture-block {
	background-position: center;
}

Or you could set it to align with the bottom too:

div.picture-block {
	background-position: center bottom;
}

See if any other options won’t help you out some.

Have a great week,
Bill

[Piyush Jain]

Hi,

I need to use the exact same image for my homepage as I have but whenever I upload the image – the size changes. Is there any way where I upload the image and it doesn’t get cropped.

Thanks.
Piyush

[Bill Robbins]

Piyush,

Thank you for your business first of all. Great question too. The images are loaded as background images and not via an image tag like would be used when you insert an image into a post. It’s handled that way so you can have the scrolling effect that the theme uses.

With background images, there aren’t as many options for resizing an image to fit as efficiently as there are with foreground images. Our main two options are to use the cover (which forces the image to completely cover the background by resizing and cropping) or contain (which will resize the background image to always fit — no cropping) in the available area.

If it’s essential to always have the entire image shown, I would suggest a quick edit to the theme so that we change the background image for a foreground one. Here’s how to do that:

1. Go to the Appearance section in your WordPress control panel and select Edit.
2. From the list of files on your right, choose page-home.php
3. Find this section:
   
4. Replace that with this:
   
5. Save your changes.

That will replace the first block’s background image with a foreground image. If you need to make that change for the other sections you can. Just replace each section with the code above, making sure to change the section_image_1 so it fits the section you’re working in (section_image_2, section_image_3 and so on).

That will cause the images to be displayed completely, but they will not have the scrolling effect because of the switch.

If you have any questions, just let me know,
Bill

[Piyush Jain]

Thanks Bill for prompt response.

I have been trying to work around this but have not be able to do so. I can not change the images to background images as I would need the slider effect.

Please check website @ clickforfood.in – images are looking fine in 14” screen but are getting distorted in smaller screen which just kills the look and feel of the website.

We have tried to over-write your css with java script, media query on style.css and inline page with
div.picture-block{
background-position: center top;
-moz-background-size: :100% !important;
-webkit-background-size::100% !important;
background-size:100% !important;
}

but still have not been able to work it out – for some reason my css is over-written by theme css on homepage which I am not able to find. Would appreciate if you could help with this.

Thanks.

[Bill Robbins]

Sorry for the confusion. The home page images are all background images. They aren’t applied to the “body” of the whole site, but rather to the sections that hold them and allow the scrolling effect to happen.

You can also swap from having a fixed header to one that scrolls. That will keep the tops of your images from being cut off by header itself. The option to turn that off is in the Styling tab of the Theme Options page in the header section.

Once the header is changed, you can set the height of each section to the height of your image and then use this:

div.picture-block {
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}

That will cause the images on resize to display all of the image. With the header no longer cutting off the tops that should help too.

Let me know if I can help,
Bill

[Piyush Jain]

Thanks Bill.

Is there anyway where I can keep the header as fixed and write my own css for the homepage – I have already wrote an css for image display on different devices but your css is overwriting it – someway I can disable from where you are calling images?

Thanks.

[Bill Robbins]

With the header fixed, and the images fixed, there will always be a portion of the images that are hidden. Probably the easiest way around that would be to have some area at the top of the images that wouldn’t matter if it was cut off.

If you’d like to change out the images based on browser size you can do that. The CSS snippet to do that would look something like this:

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

	div#one div.picture-block {
		height: 400px ;
		background-image: url(https://pathtoyourimage.com/image.jpg);
	}

}

That would change the first picture block to have a height of 400 pixels and a different background image when the browser window is 767 pixels wide or narrower. You can repeat that for the other sections by changing the #one to the section you’d like to change (#two, #three and so on).

Let me know how that turns out for you,
Bill

[Author]

Posts