html - Centering a png on a gradient backgound -
i'm trying center png on top of gradient background can't work.
html { height: 100%; background-color: red; background: -webkit-linear-gradient(#02747a, #48266c); /* safari 5.1 6.0 */ background: -o-linear-gradient(#02747a, #48266c); /* opera 11.1 12.0 */ background: -moz-linear-gradient(#02747a, #48266c); /* firefox 3.6 15 */ background: linear-gradient(#02747a, #48266c); /* standard syntax */ } #rocket1 { height: 300px; width: auto; margin-left: auto; margin-right: auto; }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.1.0/octicons.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <img id="rocket1" src="http://imageshack.com/a/img912/5645/0w5agb.png"> <script src="https://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="script.js"></script> </body> </html>i know absolute position doesn't work margin, however, that's way can png on background instead of leaving white space. how can it?
this have now
this how want be
you can position: absolute , transform: translate()
html { height: 100%; background-color: red; background: -webkit-linear-gradient(#02747a, #48266c); /* safari 5.1 6.0 */ background: -o-linear-gradient(#02747a, #48266c); /* opera 11.1 12.0 */ background: -moz-linear-gradient(#02747a, #48266c); /* firefox 3.6 15 */ background: linear-gradient(#02747a, #48266c); /* standard syntax */ } #rocket1 { height: 70%; width: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }<img id="rocket1" src="http://imageshack.com/a/img912/5645/0w5agb.png">
Comments
Post a Comment