Background image for header
I want to add a background image to the header and set the background position for it. Here is my code that doesn't work.
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home</title>
<!-- Meta viewport tag is to adjust to all Mobile screen Resolutions-->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/Jstyle.css" />
<script type="text/javascript" src="Javascript/jquery1.js"></script>
<script type="text/javascript" src="Javascript/jquery2.js"></script>
</head>
<body>
<div data-role="page" id="project">
<div data-role="header" class="header"></div>
<div id="ad" align="center">
<img alt="image" src="images/ad.png">
</div>
<div data-role="content">
<div id="product" align="center">
<img alt="image2" src="images/product.png">
</div>
<!-- Style card -->
<div id="style" align="center">
<img alt="image2" src="images/style_card.png">
</div>
<!-- Social -->
<div id="social" align="center">
<img alt="image2" src="images/app_store.png"> <img
alt="image2" src="images/social.png">
</div>
</div>
</div>
</body>
CSS
.header{
background-image:url("images/image_bg_inner.png");
width:200px;
background-color: #B00C0C;
}
Tried with help .ui-header
too .. and it doesn't work. Please help me how can I do the same.
+3
source to share
3 answers
Try:
.header {
width:200px;
background-image:url("images/image_bg_inner.png");
}
Perhaps background-color
contradicts background-image
.
Or:
Add height to your title.
.header {
width:200px;
background-color: #B00C0C;
background-image:url("images/image_bg_inner.png");
min-height:70px;
}
+1
source to share