Let's say i have a css class called 'author' like in this code :
.author {
background:url('img/user91.png');
background-size:10px 10px;
background-repeat:no-repeat;
color:#62c6ff;
bottom: 0;
font-family: sans-serif;
text-decoration: none;
text-transform: lowercase;
font-size: 9px;
margin-left: 20px;
margin-top: 70px;
}
and html :
<p class="author"><a href="#">@jimmy</a></p>
I want @jimmy to be displayed in ap and in the left side of @jimmy to appear the image background.
You should use background-position to place the image on the left side:
background-position: left center;
or
background-position: 0 0;
And then play with padding to place the link to the author:
padding-left: 15px;
you need to add
background-position: 0 0; padding-left: 10px /*this should be equal to image width*/
to .author class
Hope this helps!
do you need any fiddle link to show this up?
只需使用它
`background:url("img/user91.png") no-repeat right 0px; `
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.