Member Avatar for 123468743867143

I have rebuilt numerous navigational buttons into CSS (.button {backgroung-image ETC) to reduce the number of http requests.

It works fine (better loading time and so forth) except that the images are "seen" as unsecured.

My thought: Possibly move or copy the images in question from http to https.

But how?

I used MS Visual Web Developer and for some reasons can't figure how to do that.

Any ideas … suggestions … anything …?

Thank you.

Natasha (It is Sunday ... what are we all doing on line?)

  • 1 Contributor
  • 1 Reply
  • 118 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by 123468743867143

Dani AI

Generated

had the right idea — the problem was mixed content: the page was served over HTTPS but some background images were being requested over HTTP. Using site-root relative paths makes the browser request those assets with the same scheme as the page, so an HTTPS page will fetch them over HTTPS and avoid the “insecure content” warning.

Other practical options and gotchas:

  • If images live on a different host, that host must serve them over HTTPS (obtain a certificate — free options exist such as Let’s Encrypt).
  • Prefer explicit https:// URLs for third-party CDNs. Protocol-relative URLs (//cdn.example.com/…) used to be common but are discouraged now; explicit HTTPS is clearer and safer.
  • For large sites, adding a Content Security Policy with upgrade-insecure-requests can help upgrade legacy HTTP subresource requests to HTTPS (see MDN on mixed content and CSP).

Quick troubleshooting and fixes:

  • Use the browser console (Chrome/Firefox) to see which resources are blocked or flagged as mixed content.
  • Search the codebase for hard-coded http:// strings, for example:
    grep -R "http://" .
  • If you control the server, enforce HTTPS with a redirect and consider HSTS. Example Apache redirect:
    RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Resources for further reading: MDN’s explanation of mixed content and browser behavior is a solid reference: Mixed content - MDN.

Member Avatar for 123468743867143

Hey I fixed the problem.

It was as simple as adding a "/" in front of my image file name in my CSS. That way it directed to secured files when https was requested.

Fo anyone interested:

a.button1{background-image:url('/images/l_btn01.gif');
display:block;
float:center;
height: 25px;
width:204px;}

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.