I'm trying to show a background image on an Android phonegap app based on jQuerymobile.
This is the HTML
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquerymobile.css" />
<link rel="stylesheet" href="css/index.css" />
<script src="js/jquery.js"></script>
<script src="js/jquerymobile.js"></script>
</head>
<body>
<div data-role="page" id="Main" class="main-page">
<ul data-role="listview" data-filter-reveal="true" data-filter="true"
data-filter-placeholder="Insert the city here..." data-inset="true">
<li>Limone Piemonte</li>
<li>Artesina</li>
<li>Tonale</li>
</ul>
</div>
<!-- /page -->
</body>
</html>
This is the CSS (index.css)
.main-page {
background: transparent url(img/alpettalownologo.jpg) no-repeat center center;
background-size: cover;
}
But I see no image in background. What am I missing?
I'm guessing your url(img/alpettalownologo.jpg) is not correct as this would mean it's in a sub directory of your CSS files.
The location of the background image needs to be in relation to that particular CSS file, so maybe url(../img/alpettalownologo.jpg) as a guess would work, depending on your file structure.
Related
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trial </title>
<link rel="stylesheet" type="text/css" href="trial.css">
</head>
<body>
<div class="container1">
<p>
Hello
</p>
</div>
<img src="D:\Trial Website\Grow Image.jpg" alt="image">
</body>
</html>
Image file location seems to be working in HTML in image tag, but it is not working in css where I use the same file location.
This is my CSS code:
h1 {
color: green;
}
.container1 {
background-image: url(D:\Trial Website\Grow Image.jpg);
text-align: center;
}
You must put URL that is web accessible, not path.
So if your webroot is under Trial Website, then do
<img src="/Grow Image.jpg" alt="image"/>
background: url("/Grow Image.jpg") ;
Place the resource path within quotes and the path should follow web standards, i.e, use forward slashes while defining a path.
Change this:
background-image: url(D:\Trial Website\Grow Image.jpg);
To:
background-image: url("/Trial Website/Grow Image.jpg");
This shall fix the issue.
I have three files in my public_html root:
public_html:
index.htm
deer.jpg
style.css
In the css.style i have
body{
background-image:url('deer.jpg');
}
In the index.htm, i have
<head><meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<title>AAA</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Filling the Gap betwwen ASIC Design Education and Industry</h1>
<h2>Interview Questions/Industry Case Study</h2>
<ul>
<li>Asic Design</li>
<li>Rental Management</li>
</ul>
<p></p>
</body>
</html>
Why the picture doesn't show up in my webpage?
Try using background: url('deer.jpg') no-repeat; instead of background-image
I just started learning php and I dont know how to change the color of well.
Doing research I found this
.well.homefull{
background: rgba(0, 0, 0, 0.4);
}
But I dont know where to put it and how to use it with
<div class="well">
if I simply put it before div class=well it doesnt work
You'll need to override the css rules of the boostrap well class.
To do this, you'll need to create a custom css file and call this external style sheet from the html page.
For example :
.well {
background-color: rgba(0,0,0,0.4) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
Some content
</div>
Hope it helps.
EDIT :
Or in one page, you could put the style rules between <style></style> tag (take care to put the overriding style rules after the call of bootstrap sources) :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Developping JazZ Sheet</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.well {
background-color: rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div class="well">
some content
</div>
</body>
</html>
I have 3 webpages. The first is called inventorshome, second PythonTutorialHome, third HTMLTutorialHome. The second and third look the same in the browser. Notice that the code is exactly the same for the pages. They should look exactly the same by that logic. For some reason, the div is larger for inventorshome than in PythonTutorialHome and HTMLTutorialHome. I am using Google Chrome browser, and they are files on my computer.
Here is the code for inventorshome:
<!DOCTYPE html>
<head>
<title>Home</title>
<base href="file:///C:/Users/David/Documents/Website/Pages/">
<link rel="stylesheet" type="text/css" href="file:///C:/Users/David/Documents/Website/Pages/inventorshomestyles.css">
</head>
<body>
<div id="header">
</div>
</body>
</html>
Here is the code for PythonTutorialHome:
<!DOCTYPE html>
<head>
<title>Home</title>
<base href="file:///C:/Users/David/Documents/Website/Pages/">
<link rel="stylesheet" type="text/css" href="file:///C:/Users/David/Documents/Website/Pages/inventorshomestyles.css">
</head>
<body>
<div id="header">
</div>
</body>
</html>
The CSS linked to these webpages is:
#header {
position:absolute;
left:0px;
top:0px;
background-color:#8AC007;
width:100px;
height:30px;
}
When I change the width and height to percentages, they are the same across all three pages. When the dimensions to pixels, different results are yielded. What is going on here?
I've been trying to figure this out all day. Been busting my head and still can't figure it out. I'm writing up an HTML email:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=false" />
</head>
<style media="screen" type="text/css">
#headerbar {width:100%;background-color:#7FCBD8;text-align:center;color:#FFFFFF;}
#greeting {width:500px;margin:20px auto;text-align:left;padding:0 0.5em;font-size:1.4em;}
#bodytext {width:500px;margin:0px auto;text-align:left;padding:0 0.5em;font-size:1.2em}
body {margin:0;padding:0;font-family:Helvetica Neue;}
</style>
<style media="screen and (max-device-width:640px)">
#greeting {width:400px;font-size:1.2em;}
</style>
<body>
<center>
<div id="headerbar">
NewsLetter
</div>
<div id="greeting">
Hello <span style="color: #7FCBD8"><b>#{{ user.username }}</b></span>,
</div>
<div id="bodytext">
<p>
We would like to update you with news around the community.
</p>
</div>
</center>
</body>
</html>
Everything seems to be working great on all Desktop browsers. Firefox & Chrome don't have any issues. But on the native Mail app on the iPhone, the content is not 100% full width. There seems to be a blank space on the right hand side! How can I fix this?
It is not blank space on the right hand side, but your calculations are making the boundary extend beyond iPhone screen (320px width). My suggestion would be not to use static measurement values and also to take into consideration your padding and margin values when assigning width.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=false" />
</head>
<style media="screen" type="text/css">
#headerbar {width:100%;background-color:#7FCBD8;text-align:center;color:#FFFFFF;}
#greeting {text-align:left;padding:0px;font-size:1.4em;}
#bodytext {margin:20px;text-align:left;padding:0 0.5em;font-size:1.2em}
body {margin:0;padding:0;font-family:Helvetica Neue;}
</style>
<style media="screen and (max-device-width:640px)">
#greeting {width:100%;font-size:1.2em;}
</style>
<body>
<center>
<div id="headerbar">
NewsLetter
</div>
<div id="greeting">
Hello <span style="color: #7FCBD8"><b>#{{ user.username }}</b></span>,
</div>
<div id="bodytext">
<p>
We would like to update you with news around the community.
</p>
</div>
</center>
</body>
</html>
The values I have changed might effect your design, however it is a good point to start fixing the issue.