CSS background-image ne montre pas avec des URL courtes

J'ai fait ma recherche et les sujets n'ont pas été de l'aide.

Je vais essayer d'avoir l'image de fond de mon en-tête de répéter l'échelle de l'axe X de l'en-tête div.

Quand je fais CSS avec une URL longue comme

background-image:url('http://site.com/images/logo.png'); tout fonctionne bien

Quand j'ai essayer de raccourcir le CSS à quelque chose comme ~/images/ou même d'avoir le CSS et le fichier de site déjà dans le dossier racine et à l'aide de /images/je ne reçois rien

background-image:url('~/images/logo.png')

background-image:url('/images/logo.png')
  • /images/ devrait fonctionner. Pouvez-vous vérifier dans Firebug de l'onglet "Net" ce que le montant total de la demande finit par ressembler, et ce que la réponse que vous obtenez en retour?
  • Non pas que cela importe vraiment, mais unique en citant vos ressources les chemins à l'intérieur de url() ne fonctionne pas dans IE5 Mac. Le style préféré est de ne pas les citer tous.
InformationsquelleAutor | 2011-04-23
  1. 4

    C'est peut-être parce que vous n'êtes pas raccourcir vos URLs de manière appropriée.

    Dans l'hypothèse d'un chemin d'accès absolu:

    url('www.example.com/images/imageName.png');

    Un relatif à la racine de l'URL serait:

    url('/images/imageName.png');

    Et un chemin d'accès relatif (en supposant que votre fichier CSS est dans www.example.com/css/cssStylesheet.css) serait:

    url('../images/imageName.png'); /* parent directory, then the images directory */

    La ~ préfixé format de l'url est inconnu pour moi, bien que je soupçonne que c'est un ASP ou .NET, la forme? Si je ne suis pas en mesure de vous conseiller sur que.

    Questions qui pourraient vous être utiles:

    • il est en effet asp.net =)
    • merci de bien vouloir! =)
    • '../images/' travaillé. Je suppose que d'entrer dans une .NET de classe m'a fait oublier de base en HTML et CSS. Merci à tous pour l'aide.
    • Il semble que vous êtes nouveau sur stackoverflow, alors tout d'abord, bienvenue =) Si l'une des réponses ici, a répondu à votre question (et il semble avoir!) veuillez cliquez sur la case à la gauche de celui-ci pour le marquer "a Accepté de Répondre". Dans ce cas, il ressemble à David a des marques haut de la page il y! Ce faisant awards "points de réputation" de cette personne ET vous, quelles sont les installations utilisant les fonctionnalités du site (éventuellement!). Vous pouvez également cliquer sur la flèche pointée vers le haut à côté des réponses à des "voix", qui "récompense" le répondeur avec des points de réputation, si vous pensez que la réponse a de valeur que pour vous.
    • ... Il rend également plus probable que les gens vont prendre le temps de répondre à toutes autres questions que vous vous posez. Certains utilisateurs sur stackoverflow ne pas répondre aux questions des utilisateurs qui ne marque pas les réponses comme "Accepté", donc si vous êtes susceptibles de vous poser plus de questions, c'est une autre raison d'accepter une réponse lorsque l'on est digne d'être accepté =)
    • et un +1 de moi, bien plus complet que celui de ma réponse. Si je blâme que sur la distraction de la Victime et du vin blanc 😉
    • Merci. J'ai voté pour David post et va certainement le faire à chaque fois. En fait j'ai été chercher autour pour remercier la personne qui a aidé entre le moment mon problème a été résolu et le temps, j'ai lu votre post.

    InformationsquelleAutor David Thomas
  2. 0

    Une URL contenant "~" est quelque chose qui est spécifique à ASP.NET, son traitement côté serveur et transformé en un "bon" URL de la forme http://mysite/my_virtual_directory/images/logo.png. Les Navigateurs Web ne dispose d'aucun moyen de faire ce qu'ils ne savent pas ce que "~" se réfère.

    Vous devez vous assurer que l'Url que vous utilisez dans votre fichier CSS sont "compréhensibles" par le navigateur, donc soit avoir "pleinement qualifié" (http://mysite/my_virtual_directory/images/logo.png) ou à partir de la "commencement" (/my_virtual_directory/images/logo.png).

    InformationsquelleAutor Rob