Couvrir div entier avec l'image

pour mon site Web joomla 3.x J'utilise un modèle basé sur le cadre EF4. J'ai assigné la largeur "5" pour positionner top2-1 et "7" pour positionner top2-2. Je voulais créer un module html personnalisé pour la page d'accueil (http://francescaleso.com/it/) en position top2-1 pour montrer une image d'arrière-plan en la remplissant complètement. J'ai essayé comme suggéré sur ce site fait comme ceci:Couvrir div entier avec l'image

.homeimg { 
    overflow: hidden; 
    background-size: cover; 
    background-position: center; 
    background-image: url(/images/headers/home-image.jpg); 
}

Et le module n'a que

<div class="homeimg"></div>

Le chemin de l'image est correcte, parce que si je tente « ouvrir dans un nouvel onglet » il s'affiche correctement, mais il n'apparaîtra pas sur ma page d'accueil.

Source

2017-07-02 94a94

si je comprends bien, vous voulez inclure l'image complète dans le div qui a 'class =" span5 "'. Donc, pour y parvenir, je viens de changer votre '

' '

' et a fonctionné. J'espère que cela résoudra votre problème! Voici une capture d'écran de la façon dont il ressemble à: [Imgur] (http://imgur.com/vQjGA5y) –

Si cela, je reçois ceci: http://francescaleso.com/it/ Et comme vous pouvez le voir ne couvre pas complètement la zone. si vous regardez l'exemple sur le commentaire ci-dessous, vous verrez ce que je voudrais réaliser. De plus, je voudrais qu'il soit 100% de hauteur (et donc remplir la page verticalement si non défilée) mais pas horizontalement – 94a94

Effectuez ces modifications dans le CSS.

.homeimg { 
    background-size: cover; 
    background-position: center; 
    background-image: url(/images/headers/home-image.jpg); 

    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
}

Source

2017-07-02 16:33:06

Cela ne va pas aider, puisque l'image couvre la totalité de la page l'autre contenu, tandis que j'en ai besoin pour couvrir juste la partie supérieure gauche de celui-ci. Voici un exemple de ce que j'essaie ** désespérément ** d'atteindre: http://www.joomla.it/template/8718-ohio-template-only-v1-0.html Honnêtement, je ne sais pas Je n'ai pas la moindre idée. – 94a94

---- --- modifier si je joue un peu avec des positions absolues et relatives, je reçois ceci: le problème est que l'image ne soit pas la pleine hauteur de l'espace unscrolled, et aussi a un remplissage indésirable ou quelque chose sur la gauche ...

Source

2017-07-02 18:53:55 94a94

Couvrir div entier avec l'image

Répondre

Questions connexes