Why is background image not showing up? I tried almost every method from google but I cannot see anything.
please give me a solution.
:(
Code is below.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="home">
</div>
</body>
</html>
CSS
.home {
display:flex;
width:100vw;
height:100vh;
}
.home::before {
content: '';
display:block;
background:url(https://pixabay.com/photos/workplace-team-business-meeting-1245776/);
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
}
Download the image and write into url('...') path to the image OR you need path directly to the image:
https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace-1245776_960_720.jpg
Right click on the image -> View Image
.home::before {
content: '';
display:block;
background:url(".home::before {
content: '';
display:block;
background:url("https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace-1245776_960_720.jpg");
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
});
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
}
NOTE: Check if the image is useable. Check license before public using it
I think the problem is in your pic because I've tried with another pic, and it works
.home {
display:flex;
width:100vw;
height:100vh;
}
.home::before {
content: '';
display:block;
background:url('https://unsplash.com/photos/O2o1hzDA7iE/download?force=true&w=1920');
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
}
Related
i am trying the image to cover full page.
Vertical scroll : allowed
Horizontal scrolling : disallowed
Image : image must show full page without leaving border and responsive based on device size.
html, body, img {
max-width: 100%;
min-height: 100%;
height: auto;
width: auto;
overflow-x: hidden;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<img src="example.png" />
</body>
</html>
The issues is, it leaving a blank space in all 4 side of the screen. How to fix this?
It may Help you :
*{
padding:0px;
margin:0px;
}
img{
width:100%;
object-fit:cover;
max-width: 100%;
}
You can use the background image property
Check here - W3schools
You have to reset the browser added styles to the body tag by removing the padding and margin from it, feel free to add this at the top of your styles:
body {
padding: 0;
margin: 0;
}
html, body, img {
max-width: 100%;
min-height: 100%;
height: auto;
width: auto;
overflow-x: hidden;
}
If you want the image to cover full page, better use background-image and background-size cover, using this way your aspect ratio is also maintained
html, body {
height: 100%;
}
body {
background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg');
background-size: cover;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
</body>
</html>
Try this
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: 100%;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" />
</body>
</html>
I've been trying to create a simple menu.php for my web server with two buttons
b1=Log in and b2=Register. Each of those will call its separate function which will then scan for the id='main' block and change its internal html to something along the lines of <?php include('testLogIN.php') ?> and <?php include('testRegister.php') ?>. The buttons erase the internal html of the block with id='main', BUT on my server the buttons when clicked do nothing. I am led to believe this might be a problem with how nested strings work, thus echo "He said 'haha' and left." wouldn't print He said 'haha' and left. correctly. I understand i might be all over the place with my description but please bear with me.
#charset "UTF-8";
.right{
margin:1%;
position:relative;
clear:right;
float:right;
right:15px;
}
.left{
margin:1%;
position:relative;
clear:left;
float:left;
left:10px;
}
.bleft{
margin:1%;
position:relative;
float:left;
width=15px;
}
.fleft{
float:left;
}
.mainbox{
margin:2%;
width:450px;
height:auto;
}
.box{
clear:left;
float:left;
margin:1%;
width:280px;
height:33px;
}
img{
max-width: 100%;
max-height: 100%;
width: auto;
}
.stat{
float:right;
position:fixed;
right:10px;
}
.bolded{
border-width: 5px;
size:5px;
}
h2{
margin-left:2px;
}
.white{
color:#DDD;
}
.black{
background-color:#333;
}
hr{
clear:left;
}
<!DOCTYPE html>
<html>
<head>
<title>Main</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
.abs{
position: absolute;
top: 0;
left: 0;
}
.rel{
position: relative;
}
a:visited{
color: green;
}
body{
margin: 0;
padding: 0;
border: 0;
background--image: url("images/dragon.jpg");
background-size: cover;
}
</style>
</head>
<body>
<div class="rel">
<img src="images/dragon.jpg">
<div id='main' class="mainbox black abs">
<button onclick='tologin()'>Log in</button>
<button onclick='toregister()'>Register</button>
</div>
</div>
</body>
</html>
<script>
function tologin(){
document.getElementById("main").innerHTML ="<?php include('unistuff/LogIN/login.php');?>";
}
function toregister(){
document.getElementById("main").innerHTML ="<?php include('unistuff/LogIN/toregister.php');?>";
}
</script>
Since php ignore scripts (it will include both file without yielding to javascript), i will suggest you look into Loading file with javascript
Or you can use jQuery load method(dont load PHP file):
<script>
function tologin(){
$("#main").load('login.html');
}
function toregister(){
$("#main").load('register.html');
}
</script>
IF necessarily PHP then you can use Ajax
I would like to show an animated gif after a form button is clicked.
UPDATE: I found a solution here: http://www.corelangs.com/css/box/fulloverlay.html
I combined that with an animated gif (instead of the login form) to get the effect I wanted.
I used the .show() method in my script like this:
$(document).ready(function () {
$("#my_submit").click(function(e) {
console.log("please wait...");
$( "#processing_gif" ).show();
$( "#cover" ).show();
In my form I used these divs:
<div id="processing_gif"></div>
<div id="cover"></div>
And I used this CSS:
#processing_gif {
position:fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:100%;
opacity:0.8;
background: url('/files/animation_processing.gif') center center no-repeat;
display:none;
}
#cover{
position:fixed;
top:0; left:0;
background:rgba(256,256,256,0.9);
z-index:1;
width:100%;
height:100%;
display:none;
}
Here is the full original tutorial:
<!DOCTYPE html> <html > <head> <style type="text/css"> .button { width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none; } #cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; } #loginScreen { height:380px; width:340px; margin:0 auto; position:relative; z-index:10; display:none; background: url(login.png) no-repeat; border:5px solid #cccccc; border-radius:10px; } #loginScreen:target, #loginScreen:target + #cover{ display:block; opacity:2; } .cancel { display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:30px; width:35px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; } </style> </head> <body> <div align="center"> <br><br><br><br> Click here to Log In </div> <div id="loginScreen"> × </div> <div id="cover" > </div> </body> </html>
You can just add $("my_image_selector").show() before $.ajax(params) and hide it when "success" or "error" occurs by adding there $("my_image_selector").hide()
Or you can use .ajaxStart and .ajaxStop. see jquery docs
ah jquery - sigh.
You're going to have to tweak this to get the styling/presentation you want, but I'm going to point you in the general direction using plain old JavaScript.
Add an image tag with the gif you want to use on the page where you want it
< img src='loading.gif'/>
Add an id and "display:none" to the image style to hide it
<img id='loadingImg' style='display:none;' src='loading.gif'/>
get rid of the onclick handler in your submit button tag and instead put code like this below your form
<script>
//listen for click on your button
document.getElementById('add-all-to-cart').addEventListener('click',
function(event){
//this is the code that runs when the button is clicked
//get the button we clicked on
var target=event.target||event.srcTarget;
//set that button to disabled
target.disabled=true;
//display the loading image
document.getElementById('loadingImg').style.display='block';
}
</script>
the following code i have tried in fiddle but when i actually get it on my desktop it seems not even working.
the images are tried to be overlayed on main image using javascript.
i guess i am going somewhere wrong in referencing.
a little help will be appreciated.
code:
<html>
<head>
<style>
div {
position:absolute;
}
#main {
width:256px;
height:256px;
}
#overlay {
position:absolute;
height:100px;
width:100px;
top:0;
left:0;
display:none;
}
.overly {
position:absolute;
height:100px;
width:100px;
bottom:0;
right:0;
display:none;
}
</style>
<script>
$(document).ready(function() {
$("#main").mouseenter(function() {
$("#overlay").show();
});
$("#main").mouseleave(function() {
$("#overlay").hide();
});
});
$(document).ready(function() {
$("#main").mouseenter(function() {
$("#overly").show();
});
$("#main").mouseleave(function() {
$("#overly").hide();
});
});
</script>
</head>
<body style="margin:0px; padding-top:0px">
<div>
<a href="">
<img id="main" src="image/productold.JPG" />
<img id="overlay" src="image/over1.jpg"/>
<img class="overly" src="image/over2.jpg"/>
</a>
</div>
</body>
</html>
Try adding z-index properties to the styling of the two divs. That should allow you to put one on top of the other. For example:
#main {
width:256px;
height:256px;
z-index: 0;
}
#overlay {
position:absolute;
height:100px;
width:100px;
top:0;
left:0;
display:none;
z-index: 1;
}
.overly {
position:absolute;
height:100px;
width:100px;
bottom:0;
right:0;
display:none;
z-index: 2;
}
For more information on this property, see the W3Schools page on the Z-Index property here.
Hello Stack Overflow Community! I haven't really utilized this resource and basically learned how to work Google Apps Script from the ground up (with my very limited knowledge of scripting languages). I am having trouble with embedding jQuery into my Web App and I turn to the experts for help.
This is just a quick example I came up with to illustrate what I am trying to achieve. What I want is for the "container" div to have a dynamic height. That way, the whole screen is filled up, no matter what size it is (well, not a phone most likely). Here is the code:
Code.gs
function doGet(request) {
return HtmlService.createTemplateFromFile('app').evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
stylesheet.html
<style>
#main {
height: 100%;
width: 100%;
background-color: #DDD;
}
#header {
height: 100px;
width: 100%;
background-color: blue;
position: top;
}
#menu {
height: 50px;
width: 100%;
background-color: black;
position: top;
}
#container {
height: auto;
background-color: red;
margin-left: 15%;
margin-right: 15%;
}
#footer {
height: 50px;
width: 100%;
background-color: blue;
}
</style>
javascript.html
<script>
function adjust(){
var maxH = $("#main").height();
var afterHeight = maxH - ($("#header").height() - $("#menu").height() - $("#footer").height());
$(".kamil_test").css({height:afterHeight});
}
$(document).ready(adjust);
$(window).resize(adjust);
</script>
app.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">
</script>
</head>
<body>
<?!= include('stylesheet.html'); ?>
<?!= include('javascript.html'); ?>
<div id="main">
<div id="header">
</div>
<div id="menu">
</div>
<div id="container">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
I think my post is too long, but I wanted to show what is going on from all four parts. Wanted to make sure I wasn't overlooking anything.
Just use this and adapt it to what you are trying to do.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout - 100% height</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:1em;
margin:0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>CSS layout: 100% height with header and footer</h1>
</div>
<div id="content">
<h2>Min-height</h2>
</div>
<div id="footer">
<p>
This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
</p>
</div>
</div>
</body>
This is a simple one; it's fortunate that CSS has the ability to set a ceiling and a floor for the sizes of objects.
In your case, you want to set the floor (meaning the lowest possible value) of the height of your div to the height of the screen.
Answer:
min-height: 100%;
The div should already try to resize to allow it's contents to completely fit inside of it's volume. By adding this tag, the div will still resize OR if it's contents have a total height less than the height of the screen, the div will still remain the height of the screen.