Homepage › Community Forums › Ambition › Front page background image
Tagged: background images
I uploaded an 1800 x 1200 for my top widget background image on the homepage. The image blows up way too big. So I reduced the size to 1600 x 1050 and it’s still way too large. If I reduce the width any further to where it fits more of the image into the frame, there is white space on either side (depending on the screen size of course).
How can I have the entire image show up? I realize it will change as it is responsive, but I would at least like to start with the full image intact.
I’m very comfortable with the css editor. You can just tell me where to change the width if need be. Or maybe there is a slider plugin I can install which would give me more control?
You can see it here: http://ssammons.staging.wpengine.com/
Thanks.
Hey there, it looks like Slider Revolution is going to work great for me. However, it appears that the theme’s CSS parameters are overriding my slide text and button design when I add the my slide to the Front Page 1 widget section. How do I disable that or keep it from happening?
I don’t see anything from the Theme overriding the plugin. The text and the buttons seem to be showing up fine on my end. How are they supposed to look? ….Or did you get it working?
I uploaded an image the recommended size 1600 pixels wide and 1050 pixels tall. I want to know 2 things:
1. Why doesn’t the image resize on any mobile device.
2. Why there is so much white space below the Featured Section 1 Image?
Thank you.
Harmonie
Oops, here’s the link –> http://www.vintagestpats.com/
OK well I resolved #2, but I’m still interested in learning how to make it responsive.
Most browsers can only resize a background image so far. They do their best to scale them to best fit the browser without stretching or shrinking the image too much. The goal is to adjust the image without losing quality. This is how it works on any theme or any site that attempts to resize a background image for smaller mobile browsers.
Most sites (including large sites/companies) will include a 2nd image that is designed for mobile devices. So if you have a large/wide image for desktop/laptop, you could also have a slim, more vertical background image that appears for mobile devices.
This applies to background images. Inline images usually resize for mobile devices much easier….but it’s difficult to make an inline image show up as a background image with text, buttons, and widgets on top of it at the same time, which is why most will have the 2nd image appear if necessary.
Having a 2nd image is not always necessary though, it really just depends on the type of image you’re using and how much of it needs to be seen on a mobile device. On mobile browsers it’s expected to sacrifice some of the background due to the size of the browser.
Depending on how you want things to be displayed, you can try changing the background-size: auto;
to background-size: contain;
or cover
to see if you get a better result for the image you’re using. You can find this code in the responsive section around line 2390 in your style.css file
.front-page-1,
.front-page-4,
.front-page-6 {
/*background-attachment: scroll;*/
-webkit-background-size: auto;
-moz-background-size: auto;
background-size: auto;
}
Thank you, Wes. I am getting there with different images. My final 2 questions are:
1. Why is the image not showing up on my iPad?
2. How to remove the white space between the new image and the front page 2 (less concerned about this but it’s bugging me).
Just to confirm, I highly researched #1 above (Why is the image not showing up on my iPad?). It isn’t showing up on the demo either. I tried everything (baseline images, gifs, sizes, / after URL). I tried everything I could get my hands on and nothing.
Holy cow, I figured the iPad bug, added:
background-attachment: scroll !important;
Under
@media only screen and (max-width: 1200px) {
.front-page-1 {
background-image: url("http://www.vintagestpats.com/wp-content/uploads/home-main-1200.png") !important;
background-attachment: scroll !important;
}
I actually have a similar solution to fix that for iPad browsers that I tested with another theme. Right when I was going to apply the update to Ambition, my iPad stopped working (kids got a hold of it). So once I get that fixed then I can get back to testing and updating that issue.
Most of that white space you’re seeing (on smaller browsers/mobile devices) is because of the minimum height that you added –
.front-page-1 {
position: relative;
min-height: 900px!important;
}
….As well as the size of your image. Since you have your image set to show itself in full, it would be better to remove the min-height since the image can only stretch so far. If you have it set to show itself in full, then the browser will show the full image, but it won’t stretch too far (height-wise) since it has to show the full image within the small space.
Also, there is a lot of space on top of your image itself that I would remove. I would remove all the extra space from the image so it only shows the image from top to bottom, left to right. It should definitely show up better once you edit the image itself, and then apply the other changes.