- This topic has 4 replies, 2 voices, and was last updated 10 years, 11 months ago by
.
-
Posts
-
Hello,
My client is using the latest version of WordPress and Weaver XTreme Plus.We would like to create a home page that is different from the rest of the site.The front (home) page should have an image covering the entire screen and a menu of links to the other pages in the site overlaying the picture. We may also want some other text overlaying the picture.I know I can get close to the effect we want by starting with the translucent light subtheme and using a plugin to add a full page image for the background. However, I really only want this type of page for the home page and not site wide.Do you have any suggestions for how to easily achieve a full image splash/entry page as I have described?Thank you!Nikki B.You can easily set the overall background image for the Home page only using CSS.To be sure of the best way to do that, it would help to have a link to your site.Read the thread below on the principles if using Custom CSS for specific page backgroundshttp://forum.weavertheme.com/discussion/2648/changing-the-background-image-for-a-specific-page
If the menu on the home page also need to be different, you can easily hide the standard menu on that page with the page options, then insert a different menu anywhere you like using an Extra menu Shortcode ( +Xtreme Plus SHortocode > Extra menus)
Thank you for your assistance before.
We have assigned a background image to the home page here.Here is the direct URL to the picture we are using.The problem is that we would like the full picture to show, but no matter what I do with the the picture, it keeps getting enlarged so that the top and bottom edges are cropped to much. I’ve tried using a smaller picture and a larger one. I’ve tried cropping to make the ratio as close as I can to 16:9. I’m out of ideas. Can someone please let me know what I need to do with this image (or any image) to make the entire image will show up for the background but without having it repeat? Thank you for any suggestions you can provide!Nikki B.You need to realize a few things here.
Your image has a specific image ratio, in your case, almost square.
Browsers will have any ratio (each device is different), they could be square but they could be rectangular etc…
So when using an image as a background image, the ratio of the image will almost never match the ratio of the browser it is viewed on. You therefore need to compromise and for that you have basically 4 options.
1- Ask the image to cover the browser background (what you have right now). In that case The image will be scaled until all the browser area is covered. Depending on the difference in ratio between the image and the browser, your image will be cropped. Right now you have a square image, so when it is asked to cover a rectangular browser, top and bottom will be cropped.
2- Ask the image to be contained in the browser so that all of the image is always visible. You do that by using background-wide:contain; instead of cover, this will scale the image until it hits the edge of the browser. In your case, in a rectangular browser, this means there will be a lot of empty space on the side.
You can eventually add a background color and add a position centered so that this empty space will be on each side of the image and grey as not to attract too much attention.
3- Ask the image to be scaled in both direction to cover the browser, but that will distort your image
4- Ask nothing, which will be kind of the same as 2- except that if the browser is a lot larger than the image, given the image will not be scaled, you will have empty space in both vertical and horizontal direction.
So what you need to do is think of what behavior you want for that image, because it is not magic and a square peg cannot fit in a round hole. You need to make compromises 🙂
- You must be logged in to reply to this topic.