A background (usually an image) can be positioned very precisely with “background-position”.
This property can have many values and it is not affected by the padding value so the text could be positioned separately. The property can have two values – first for the horizontal position and the 2nd for the vertical.
The values could be center/left etc. or percentages or pixels.
Here is an example of a div with positioned background image and text:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ padding: 0 10px 0 65px; float: left; background-image:url(image.png); background-position:10px; background-repeat:no-repeat; background-color: #EAEAEA; } </style> </head> <body> <div><p>Oops! Unfortunately we couldn't verify your account.</p> <p>Please get in touch with our support team.</p> </div> </body> </html> |