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

enter image description here

this how want be

enter image description here

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

Popular posts from this blog

Receive udp packets in android gstreamer -

i using eclipse juno in windows 7. doing programming on android 4.2 platform. want receive udp packets in gstreamer application. giving uri udp://127.0.0.1:1234 , sending file vlc player same computer. emulator giving message could not get/set setting from/on resource while in case of rtp, giving message no uri implementer found rtp ideas how receive streaming media in android?
Read more

php - Extract Text from HTTP referer -

i using following code show referer link page on website. how can modify code shows part of link. i.e if website url www.example.com/?s=printing want extract printing. , should happen if format www.example.com/?s=aaa , not if format else www.example.com/printing. code: <?php session_start(); if ( !isset( $_session["origurl"] ) ) $_session["origurl"] = $_server["http_referer"]; echo $_session["origurl"] ?> i figured out , following code works: <?php session_start(); if ( !isset( $_session["origurl"] ) ) $_session["origurl"] = $_server["http_referer"]; $mysearchterm = $_server["http_referer"]; $whatiwant = substr($mysearchterm, strpos($mysearchterm, "=") +1); echo $whatiwant; ?>
Read more

matplotlib - PYTHON: Annotate boxes disapear dependant on range -

Image
i have issue plotting info boxes of data , fit. toy example follows. import numpy np import matplotlib.pyplot plt #works sigma = 0.12 mu = 0.5 #half works sigma = 0.1 mu = 0.3 ##none works #sigma = 0.05 #mu = 0.2 sample = np.random.normal(mu, sigma, 10000) fighs = plt.figure() axhs = fighs.add_subplot(1, 1, 1) n, histbins, patches = axhs.hist(sample,100, histtype='step', normed=1) axhs.annotate("$\mu=%.3f$ \n $\sigma=%.3f$ \n $n=%i$"% (sample.mean(), sample.std(), len(sample)), xytext=(0.8, 0.85), bbox=dict(boxstyle="sawtooth", fc="w"), xy=(0.8, 0.85), textcoords='axes fraction') axhs.plot(histbins, plt.mlab.normpdf(histbins, mu, sigma)) axhs.annotate(" $\mu=%.3f$ \n $\sigma=%.3f$ \n $n=%s$"%(mu,sigma,"--"), xytext=(0.6, 0.85), bbox=dict(boxstyle="round", fc="w"), xy=(0.6, 0.85), textcoords='axes fraction') plt....
Read more