#background-position

Los fondos son un elemento fundamental en el diseño web, ya que permiten crear atmósferas y establecer el tono visual de una página. En este artículo, exploraremos las diferentes formas de agregar y personalizar fondos en HTML5 y CSS, desde simples colores hasta imágenes de fondo complejas. Colores de Fondo La forma más sencilla de agregar un fondo a un elemento es utilizando un color…

Background và text trong CSS được dùng như thế nào?

Ở bài trước chúng ta đã cùng nhau tìm hiểu một số định nghĩa cơ bản về  CSS, cũng như cách viết một CSS đơn giản và nhúng chúng vào trong HMTL ra sao.

Tiếp tục trong series này chúng ta sẽ lần lượt tìm hiểu chi tiết từng thành phần cơ bản trong CSS. Trong bài thứ hai này chúng ta sẽ tìm hiểu về background và text.

Background là gì?

Background là…

background-positionをアニメーションさせる。

---

Adding Background Images To Ionic Framework Apps

I started working on an app and decided it was time to step up my design game.  Usually my apps suffer from looking plain or dated even though they have some insanely awesome functionality (ex: OTP Safe).  However, after looking at many other apps, I came to the conclusion that an app can look more attractive just by including a logo or some other kind of branding images.

The tricky part here is,…

Il se peut que la créa présente un bouton avec une icône aligné à droite, rien de plus facile en inté avec background-position en css ! background-position avec le left qu'il faut en px ! Si on ne peut pas savoir la taille du bouton qui peut varier selon le contenu par exemple, on ne peut pas adopter une valeur fixe du left. Il est possible au niveau de la position du fond de la mettre à droite et du coup ne pas se soucier de la taille du bouton, en css :

.bg{ background-position : right center; }

Exemple en ligne. L'inconvénient c'est que ça colle la bordure de droite et on aimerait avoir un peu d'espac entre l'icône et la bordure de droite, avec CSS3 on peut définir un espace à droite par exemple de 10px en css :

.bg{ background-position : right 10px center; }

Exemple en ligne. Ça fonctionne bien, le rendu est satisfaisant sauf que les anciennes versions d'IE ne le comprennent pas.

Pour avoir un rendu identique sur chaque navigateur : Si votre bouton a une couleur unie en fond, pour avoir ce décalage de l'icône serait d'avoir une bordure de droite de la même couleur et de laisser la position du fond à droite :

.bg{ background-position : right center; background-color : #789; border-right : 10px solid #789; }

Amplify’d from www.magicupload.com

Free Social Media Sharing Menu with jQuery / CSS

Make Social Media Sharing Menu using basics CSS such as the CSS background-position property and a little jQuery to make the links animated.

Read more at www.magicupload.com