Images on CSS are not being served as HTTPS-CodePudding

I have a css file where I call few images as background. Although my website has a valid certificate and the images are in the same address, it doesn't work.

I've tried using my urls as //talesebner.com/images/logo.svg, https://talesebner.com/images/logo.svg, and even https://www.talesebner.com/images/logo.svg. But Chrome, and Lighthouse too, keep saying that they are not being loaded via HTTPS.

As a side effect (I believe) the images are not even being loaded on Safari on iPhone.

What can I do?

Edit: As asked, here is my .htaccess code:

ErrorDocument 500 /errors/500.html
ErrorDocument 404 /errors/404.html
ErrorDocument 403 "Sorry, I can't allow your access today."

<IfModule mod_mime.c>
    AddDefaultCharset utf-8
    DefaultLanguage en-GB
</IfModule>

<IfModule mod_autoindex.c>
    Options -Indexes
</IfModule>

#Compress text files
<ifModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE image/svg xml
    AddOutputFilterByType DEFLATE image/bmp
    AddOutputFilterByType DEFLATE image/vnd.microsoft.icon
    AddOutputFilterByType DEFLATE application/xhtml xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/rdf xml
    AddOutputFilterByType DEFLATE application/rss xml
    AddOutputFilterByType DEFLATE application/atom xml
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/ecmascript
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/ecmascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE application/ld json
    AddOutputFilterByType DEFLATE application/manifest json
    AddOutputFilterByType DEFLATE application/schema json
    AddOutputFilterByType DEFLATE application/geo json
    AddOutputFilterByType DEFLATE application/x-web-app-manifest json
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE font/truetype
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/eot
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE application/x-pointplus
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/wasm
    AddOutputFilterByType DEFLATE text/cache-manifest
    AddOutputFilterByType DEFLATE text/calendar
    AddOutputFilterByType DEFLATE text/markdown
    AddOutputFilterByType DEFLATE text/vcard
    AddOutputFilterByType DEFLATE text/vnd.rim.location.xloc
    AddOutputFilterByType DEFLATE text/vtt
    AddOutputFilterByType DEFLATE text/x-component
    AddOutputFilterByType DEFLATE text/x-cross-domain-policy
</IfModule>
<ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

#Redirects
<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteOptions inherit

    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

    RewriteCond %{HTTP_HOST} ^www\.(. )$ [NC]
    RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^mail\/?$ "https\:\/\/sxb1plzcpnl453513\.prod\.sxb1\.secureserver\.net\:2096\/" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^cpanel\/?$ "https\:\/\/sxb1plzcpnl453513\.prod\.sxb1\.secureserver\.net\:2083\/" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^cv\/?$ "https\:\/\/talesebner\.com\/tales\-ebner\-cv\.pdf" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^portfolio\/?$ "https\:\/\/www\.figma\.com\/proto\/uAmDiShc6IahLeyhizKPQx\/\[Tales\-Ebner\]\?node\-id\=282\:15\&viewport\=\-1412\,635\,0\.3143424093723297\&scaling\=contain\&hotspot\-hints\=0\&hide\-ui\=1" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^vcard\/?$ "https\:\/\/talesebner\.com\/tales\-ebner\.vcf" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^regex\/?$ "https\:\/\/talesebner\.com\/regex\.html" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^old\/2013\/?$ "https\:\/\/web\.archive\.org\/web\/20140714190641\/http\:\/\/tales\.ebner\.com\.br\/" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^old\/2014\/?$ "https\:\/\/web\.archive\.org\/web\/20141218124503\/http\:\/\/ebner\.com\.br\/" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^old\/2016\/?$ "https\:\/\/web\.archive\.org\/web\/20161002001905\/http\:\/\/ebner\.com\.br\/" [R=301,L]
</IfModule>

#Expire headers
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf)$">
    Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
<FilesMatch "\.(ttf|otf|woff|woff2)$">
    Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

ExpiresActive On
ExpiresDefault "access plus 31536000 seconds"
ExpiresByType image/x-icon "access plus 31536000 seconds"
ExpiresByType image/jpeg "access plus 31536000 seconds"
ExpiresByType image/jpg "access plus 31536000 seconds"
ExpiresByType image/png "access plus 31536000 seconds"
ExpiresByType image/gif "access plus 31536000 seconds"
ExpiresByType image/webp "access plus 31536000 seconds"
ExpiresByType text/css "access plus 31536000 seconds"
ExpiresByType text/javascript "access plus 31536000 seconds"
ExpiresByType application/javascript "access plus 31536000 seconds"
ExpiresByType application/x-javascript "access plus 31536000 seconds"
ExpiresByType text/html "access plus 31536000 seconds"
ExpiresByType application/xhtml xml "access plus 31536000 seconds"
ExpiresByType font/ttf "access plus 31536000 seconds"
ExpiresByType font/otf "access plus 31536000 seconds"
ExpiresByType font/woff "access plus 31536000 seconds"
ExpiresByType font/woff2 "access plus 31536000 seconds"

#Cache-Control Headers
<IfModule mod_headers.c>
    Header set X-Frame-Options SAMEORIGIN
    Header set X-Content-Type-Options nosniff
    Header set X-XSS-Protection "1"
    Header set Cache-Control "private, max-age=31536000, must-revalidate"
    Header set Content-Security-Policy "default-src 'self'; style-src 'self' fonts.googleapis.com; font-src 'self' fonts.gstatic.com; script-src 'self' 'unsafe-inline'; object-src 'none'"
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" env=HTTPS
</IfModule>

#Turn ETags Off
Header unset Pragma
FileETag None
Header unset ETag

CodePudding user response：

Your images appear to be loading just fine for me over https://example.com/ (no www) - so maybe you have resolved this already? However, there is a problem with your www to non-www redirect that results in a redirect-loop, so if you are using www.example.com to reference any of your images then they will fail to load. (Incidentally, since this is a 301 (permanent) redirect then it's possible you are seeing an erroneous cached response.)

RewriteCond %{HTTP_HOST} ^www\.(. )$ [NC]
RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L]

The PROTO environment variable does not appear to be set in the code you have posted and this is resulting in a relative (malformed) redirect to https://www.example.com/<filepath-to-document-root>://example.com/foo which will naturally cause a redirect loop.

You should hard-code the https protocol, as in all the other directives:

:
RewriteRule ^ https://%1%{REQUEST_URI} [R=301,L]

It is possible that this PROTO env var is intended to be set in the .htaccess file (or parent config) you are inheriting from (the purpose of the RewriteOptions inherit directive) - if any - but that does not appear to be the case.

Also, unless you plan to implement HSTS then you should reverse the HTTP to HTTPS and www to non-www rules in order to avoid an unnecessary double redirect when requesting http://www.example.com/ (ie. HTTP and www). For example:

# 1. Redirect www to non-www (and HTTPS)
RewriteCond %{HTTP_HOST} ^www\.(. )$ [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [R=301,L]

# 2. Redirect HTTP to HTTPS (already non-www)
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]