- CSS-Tricks

May 29, 2014 at 5:39 am #171344

Participant

I’ve put together a small example. I hope it is sufficient to make a point. I am unfortunately not allowed to provide any of our code or images because they belong to the company I work for. I have therefore just used some random images. The logo can be somehow similar since it also consists of styled text and some additional graphics. I have additionally just tested with a couple more images using firefox. Using the image linked in the example and the “responsive design view” in firefox with size 433×644 for example will make the logo look somehow weird.


<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <style>
    .header-with-logo>.ui-header{
        background-color: rgba(0, 0, 0, 0);
        border: 0 none;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: right center;
        background-size: contain;
        background-image: url("http://code2040.org/wp-content/uploads/2013/05/Redbeacon_outline.png");
        height: 20%;
        width:100%;
    }
    </style>
</head>
<body>
<!-- MainPage -->
<div data-role="page" data-theme="a" id="Home" class="header-with-logo">
    <div data-role="header" data-position="fixed"></div>
  
    <div data-role="content">
        <div>Some content</div>
    </div>
    
    <div data-role="footer" data-position="fixed">Some ads</div>
</div>
  
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  
</body>
</html>