Im trying to make an opening page for an app but my responsive image will not fit the full screen. Ive tried using the property values for background-size: yet the problem is still persisting. Using container, it cut the width of the image and some was missing and i dont want that.Any help is greatly appreciated. Thank You.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="http://ift.tt/1wORPGp">
<link rel="stylesheet" href="http://ift.tt/19TxsBk"><script src="http://ift.tt/13jmVM7"></script>
<script src="http://ift.tt/1toXtPU"></script>
</head><body>
<div data-role="page" >
<div id="background_image">
<div data-role="header" data-theme="a">
<h1>Formula 1 Team List</h1>
</div>
<div data-role="main" class="ui-content" id="index_button">
<a href="#" data-role="button" data-ajax="false"> List of Teams </a>
</div>
<div data-role="footer" data-theme="a" data-position="fixed">
<h1> Kevin Murphy - 11139323</h1>
</div>
</div>
</div>
#background_image
{
background: transparent url(formula1.jpg);
background-repeat:no-repeat ;
background-position: center;
background-size: contain;
}
Aucun commentaire:
Enregistrer un commentaire