Backgroud behind Background
Support Area › Forums › Elite › Backgroud behind Background
- This topic has 8 replies, 2 voices, and was last updated 9 years, 1 month ago by Bill Robbins.
-
AuthorPosts
-
January 29, 2015 at 11:11 #26045Jiří BernátParticipant
Hi Bill,
I bought plenty of background pictures. But it doesn´t look weel on my pages http://www.olivace.cz. Because there is the problem with width of my pictures.
Is it possible to change settings and use another picture at left/right side? Just like on the picture of http://www.wholefoodsmarket.com/.
So the basic background will be narrower and both sides of the page will be used for another picture?
Is it possible to set the shadow effect also? As is on the picture.Many thanks for reply.
Best regards.
Jiri
January 29, 2015 at 11:43 #26049Bill RobbinsModeratorGood Morning Jiří,
Great question there. I took a look at your site. The hero image for the home page looks like it is 800 pixels by 800 pixels. Since it is set to always fill the screen, that will result in some cropping. Most browser windows are somewhat rectangular, so you’ll get more cropping on the top and bottom.
I typically suggest using a 2000 pixel wide image by about 1200 pixels tall. That tends to work well across many browser sizes with a minimum of cropping.
If you do want to add a “wrapper” to the theme so to speak, so that it doesn’t fill the entire width of the browser window, that can be done. Let me know if you decide to go that route and I’ll show you how to make that happen.
Thanks,
BillJanuary 29, 2015 at 14:51 #26059Jiří BernátParticipantHi Bill, thanks for reply.
So it means that the wrapper doesn’t help with entire width? Lonely solution is to have 2000/1200pixels pictures?I thing it could be nice part of the design.
So can we try it?Many thanks.
Jiri
January 29, 2015 at 15:14 #26063Bill RobbinsModeratorJiri,
What we can do is set a width for the content areas of the site. That will give it a “wrapper” like the Whole Foods site has. You’ll be able to see the site background on either side of the site’s content.
It’ll take me just a bit to cook that up for you. I’ll post it this evening.
Thanks,
BillJanuary 29, 2015 at 21:21 #26070Bill RobbinsModeratorI think I have this ready to go for you. There is one edit to a theme file that’s required. I’m going to include this change in the next update in case anyone else needs to change the width of these in the future. Here’s what to do first:
- Go to the Appearance section in your WordPress dashboard and choose Edit.
- From the list of files on your right, choose custom-js.php
- Find this section:
// Masonry for footer widgets var $container = jQuery('#footer-sidebar'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.widget', gutterWidth : 60, isAnimated : true, columnWidth : 340 }); });
and replace it with this:
(Be sure to copy that code from the support site and not the notification email). - Save your changes.
- Next go to the theme options page and select the Advanced tab. Scroll down to the Custom CSS box and add this:
#footer-content { padding-left: 30px; padding-right: 30px; } #footer-sidebar { width: 100%; } .page-template-page-home-template-php .wrap { padding-left: 30px; padding-right: 30px; } @media only screen and (min-width: 1201px) { #footer, #page-wrap, #home-one, #home-two, #home-three, #home-four, #home-five, #home-six, #home-seven, #home-eight, #home-nine, #home-ten, #hero-section { width: 1140px; margin-right: auto; margin-left: auto; } #footer-sidebar .widget { width: 320px; } } @media only screen and (min-width: 1024px) and (max-width: 1200px) { #footer, #page-wrap, #home-one, #home-two, #home-three, #home-four, #home-five, #home-six, #home-seven, #home-eight, #home-nine, #home-ten, #hero-section { width: 960px; margin-right: auto; margin-left: auto; } #footer-sidebar .widget { width: 255px; } #header ul#primary-menu li { font-size: 24px; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { #footer, #page-wrap, #home-one, #home-two, #home-three, #home-four, #home-five, #home-six, #home-seven, #home-eight, #home-nine, #home-ten, #hero-section { width: 750px; margin-right: auto; margin-left: auto; } #footer-sidebar .widget { width: 300px; } #header ul#primary-menu li { font-size: 20px; } }
and update your settings.
See if that won’t set a width for your content and wrap everything up in it. I also added in some code to make your navigation menu items a bit smaller when the screen is smaller so that they will fit better.
Let me know how that goes,
BillJanuary 30, 2015 at 07:57 #26073Jiří BernátParticipantHi Bill, it works. Thank you very much. Now I have to create better pictures then I have, with bigger width.
I know that I have lot of questions, is it possible to make the shadow effect on the rigt and left side of the central bacground, but only in the case that is simple for you.
Thanks for reply.
Best regards.
Jiri
January 30, 2015 at 13:56 #26082Bill RobbinsModeratorI’m glad that worked for you. We can probably add in a small shadow. The tricky thing is since we’re working with lots of individual boxes and not one continual box from top to bottom, you may seem some of the shadow at the bottom of the home sections. If you’d like to try, add this to the Custom CSS too:
#footer, #page-wrap, #home-one, #home-two, #home-three, #home-four, #home-five, #home-six, #home-seven, #home-eight, #home-nine, #home-ten, #hero-section { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }
Have a great weekend,
BillFebruary 1, 2015 at 15:36 #26110Jiří BernátParticipantHi Bill, thank you very much 🙂
Have a nice day.
J.
February 2, 2015 at 08:38 #26111Bill RobbinsModeratorGlad that helped out…have a great week 🙂
-
AuthorPosts
- The topic ‘Backgroud behind Background’ is closed to new replies.