web-dev-qa-db-fra.com

Besoin d'aide avec mon image Masthead dans le thème Purity III

Joomla! 3.6.2 Pureté III 1.1.7

J'ai créé un fichier custom.css dans /purity_III/default

J'y mets ce code:

.page-masthead .jumbotron.jumbotron-primary {
    background: url("/images/norwegia.png") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Mais, l'image ne semble pas agréable. Je ne vois pas toute l'image. J'ai besoin d'une bonne hauteur. S'il vous plait, j'ai besoin de votre aide avec ceci.

le site web est norwegia1.pl

joomla-3.xcss
1
tomas

Parce que ce thème est réactif, la taille du générique sera toujours en train de changer. Aucune combinaison largeur/hauteur ne fonctionnera toujours.

Ce que vous devez faire, c'est reconstruire votre image afin de couvrir les plus grandes dimensions possibles sans être étirée. D'après mes tests, le plus gros height était 258px.

Ensuite, vous devez positionner vos éléments d'image critiques de manière à ce qu'ils tiennent dans les plus petites dimensions possibles. D'après mes tests, ce height était 166px.

Pour la largeur, il vous faut juste une image suffisamment large pour afficher toutes les images. Mais, assurez-vous que les images sont là dans leur intégralité (ne pas recadrer/couper, sauf sur le bas, si vous le souhaitez). Prenez la largeur de l'image un peu plus grande et terminez l'image avec une couleur unie. On dirait que vous utilisez un dégradé dans votre image avec l'extrême droite color étant #78849c.

Maintenant, au lieu d’utiliser cover, vous définissez simplement l’image d’arrière-plan avec une position du bas à gauche sans répéter et vous définissez la couleur d’arrière-plan pour correspondre à la couleur d’arrière-plan de votre image. De cette façon, l’image semble s’étendre sur toute la largeur de la page, mais votre couleur CSS est en réalité étendue au-delà de l’image.

Le code CSS final ressemblera à ceci:

.page-masthead .jumbotron.jumbotron-primary {
    background: #78849c url("/images/norwegia.png") no-repeat left bottom;
}

Désormais, à mesure que votre en-tête de texte change de taille, des parties de l'image peuvent être masquées, mais ce sont les parties supplémentaires qui importent peu. Le contenu principal de votre image sera toujours affiché.

1
Michael Yaeger

essayer

.jumbotron.jumbotron-primary {
    height: 380px;
}
0
Piero Marsilio