Post by HotRod Richard on Apr 8, 2018 16:39:04 GMT -5
To have more than 1 image in the banner area, we currently have 3 images in the banner area of this Group
I chose to put each image on a separate line in the style sheet for ease of making changes to each image. You can use as many images as you like, each image must be separated by a , (comma) and the percentages you see in the code are the 1st number of 55% is from left to right or horizontal, the 2nd number of 100% is from top to bottom or vertical. You will want to modify those values in the code to work for the images you want placed in your banner, whether it's 2 images or 3 or 4
Admin > Themes > Advanced Styles & CSS > Visual Editor then click the Style Sheet tab
Insert the code below at the bottom of your style sheet, enter your image url links, and change the percentage values to what works for your banner.
#banner
{
background: url(http:// Image URL Goes Here) no-repeat 55% 100%,
url(http:// Image URL Goes Here) no-repeat 67% 100%,
url(http:// Image URL Goes Here) no-repeat 39% 100%;
}
Keep in mind these are percentages so as different viewers use different browser widths or screen widths, this will change the location of the image. So what I did here was make the wrapper width setting at 80% and added a max-width 1100px so that even though different viewers use different size screens, they images move a little, but not very far. To test you can simply grab the side of your browser with your mouse and drag it slowly to where it's either narrower or wider and back and forth to see how your image will change positions.
If you wish to change the wrapper width you go to your Advanced Styles & CSS and in the Visual Editor Forum box select the Width drop down to change you width percentage.
If you wish to set a max width, then use the code below to put in the bottom of your Style Sheet, you can modify this Max Width to your pleasing
#wrapper { max-width: 1100px; }I hope this information was helpful to you. You can always reply too