Background images

Permalink Browser Info Environment
Hello.

Is there any way that I can alter the way the background banner images work in Salix. Specifically, I would like them to display in their native aspect ratio and resize accordingly.

Is this possible?

Thanks.

Type: Pre-Sale
Status: Resolved
tangent
View Replies:
pilipala replied on at Permalink Reply
pilipala
Hello,

The banner images use backstretch.js which makes them cover the whole area or div. You can resize the div they are in using media queries to ensure the image is taller with wider screens, e.g. adding this CSS to your custom styles:

@media (min-width: 768px) {
  div.ccm-page #salix-banner.salix-image-background {
    min-height: 400px!important;
  }
}
@media (min-width: 992px) {
  div.ccm-page #salix-banner.salix-image-background {
    min-height: 600px!important;
  }
}
@media (min-width: 1200px) {
  div.ccm-page #salix-banner.salix-image-background {
    min-height: 800px!important;
  }
}


You can adjust the heights in the CSS to get the images showing how you would like.

Thanks,

Jennifer
tangent replied on at Permalink Reply
tangent
Wow. Good reply and great support.

I am assuming this will 'ideally' depend upon the ability to customise the Theme. Is there an alternative place I can put these bits of custom CSS that won't get overwritten by a theme update?
pilipala replied on at Permalink Reply
pilipala
Hello

No problem, thanks! If you put it in Custom CSS in the design panel then it won't get overwritten with theme updates.

Of course we are aware that the design panel is not working right now in 8.5.4, so you would need to upload the files that we sent previously or update your theme when we make that fix.

Thanks, Jennifer

concrete5 Environment Information

# concrete5 Version
Core Version - 8.5.4
Version Installed - 8.5.4
Database Version - 20200609145307

# Database Information
Version: 10.3.20-MariaDB
SQL Mode: ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

# concrete5 Packages
Salix (1.1.0)

# concrete5 Overrides
None

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache

# Server API
fpm-fcgi

# PHP Version
7.1.33

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dom, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imagick, imap, intl, ionCube Loader, json, ldap, libxml, mbstring, mcrypt, mysqli, mysqlnd, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, pspell, Reflection, session, SimpleXML, soap, sockets, SPL, sqlite3, standard, tidy, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend OPcache, zip, zlib

# PHP Settings
max_execution_time - 91
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 90
max_input_vars - 1000
memory_limit - 128M
post_max_size - 200M
sql.safe_mode - Off
upload_max_filesize - 2M
ic24.api.max_timeout - 7
ldap.max_links - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
opcache.max_accelerated_files - 4000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:78.0) Gecko/20100101 Firefox/78.0

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.