I have made a simple login page and set an image as background but it is not fitting to browser screen.I am using html for this purpose what should I do fit the image to browser screen.Kindly please describe in detail.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional
//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JSP Page</title>
</head>
<body>
<h1>Login Page</h1>
<center>
<h2>SignUp Details</h2>
<body background="Indian_wallpapers_205.jpg">
<form action="LoginCheck.jsp"method="post">
</br>Username:<input type="text" name="username">
</br>Password:<input type="password" name="password">
</br>
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>
You can achieved what you want by creating a .css file and link to your <head> tag just after the </title> (closing title tag).
Hi-Resolution image will be good to use, around 2112x1584 pixels but consider the file size because it will matter for the page load time.
On the opening of your <body> tag, just delete the background property as it will be declared through the .css file.
When your image is ready, put this code to your .css file
body {
background-image: url(imagePAth/Indian_wallpapers_205.jpg); /*You will specify your image path here.*/
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: top center !important;
background-repeat: no-repeat !important;
background-attachment: fixed;
}
When your .css file is done, you can link it to the <head> tag. It will look something like this: <link rel="stylesheet" type="text/css" href="yourCSSpath/yourCSSname.css" />
That's how i make a background image to fit the browser screen.
use background size: cover property . it will be full screen .
body{
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
here is fiddle link
Found an easier way to set it. Here's the html and css:
<style>
#body {
*background: url(../Images/abcd.jpg) no-repeat center center fixed; /* For IE 6 and 7 */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body id="body">
<nav class="navbar navbar-default" id="navColour">
<div class="container-fluid">
<div class="navbar-header">
<a id="clr" class="navbar-brand" href="#">Summer Haze Festival</a>
</div>
<div>
<ul class="nav navbar-nav" >
<li id="clr" class="active">Home</li>
<li id="clr">Page 1</li>
<li id="clr">Page 2</li>
<li id="clr">Page 3</li>
</ul>
</div>
</div>
</nav>
</body>
url(../Images/abcd.jpg) being the image stored in your solution in a folder called Images. Hope it helps. Note: I used the id "body" because the navigation bar was somehow overriding my background image.
add this css in your stylesheet
body
{
background:url(Desert.jpg) no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin: 0;
padding: 0;
}
FIDDLE
HTML
<img src="images/bg.jpg" id="bg" alt="">
CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
Some answers already pointed out background-size: cover is useful in the case, but none points out the browser support details. Here it is:
Add this CSS into your stylesheet:
body {
background: url(background.jpg) no-repeat center center fixed;
background-size: cover; /* for IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */
-webkit-background-size: cover; /* for Safari 3.0 - 4.0 , Chrome 1.0 - 3.0 */
-moz-background-size: cover; /* optional for Firefox 3.6 */
-o-background-size: cover; /* for Opera 9.5 */
margin: 0; /* to remove the default white margin of body */
padding: 0; /* to remove the default white margin of body */
}
-moz-background-size: cover; is optional for Firefox, as Firefox starts supporting the value cover since version 3.6. If you need to support Konqueror 3.5.4+ as well, add -khtml-background-size: cover;.
As you're using CSS3, it's suggested to change your DOCTYPE to HTML5. Also, HTML5 CSS Reset stylesheet is suggested to be added BEFORE your our stylesheet to provide a consistent look & feel for modern browsers.
Reference: background-size at MDN
If you ever need to support old browsers like IE 8 or below, you can still go for Javascript way (scroll down to jQuery section)
Last, if you predict your users will use mobile phones to browse your website, do not use the same background image for mobile web, as your desktop image is probably large in file size, which will be a burden to mobile network usage. Use media query to branch CSS.
Try This Code:
It may help you
<html>
<head>
<style>
body
{
background:url('images/top-left.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<form action="LoginCheck.jsp"method="post">
</br>Username:<input type="text" name="username">
</br>Password:<input type="password" name="password">
</br>
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>
I encounter same trouble as you, this is my solution.
body {
background-image: url(image/background.jpg);
background-size: 100% 100%;
}
body
{
position: fixed; /*fixes the image in background*/
top: 0; /*fixes the image at top*/
left: 0; /*fixes the image at left*/
min-width: 100%; /*fixes the image width to 100% of screen*/
min-height: 100%; /*fixes the image height to 100% of screen*/
}
Related
I am building a simple landing page where the visitor would see a banner, a background image below it and a couple of buttons located vertically beneath each other.
The problem I am experiencing is that, at the moment, both the banner and the background image are starting from the same position (the top left corner of the web page), thus part of the background is hidden by the banner.
The code I currently have is:
<style>
body {
background: url("http://url.to/background") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0px;
margin: 0px;
}
#Wrap {
position: absolute;
}
</style>
<body>
<div id="Wrap">
<img src="http://url.to/banner" />
</div>
</body>
The expected result is to have the banner image take the beginning of the page while fitting into the screen without causing any extra scroll to appear. What is more important is to have the background start after the banner.
A fiddle could be found at the following URL:
https://jsfiddle.net/morL1zka/
Any help or ideas would be appreciated.
you should use background-position-y for this, and you need to set value which is equal to the height of the banner
body {
background: url("https://www.w3schools.com/css/img_fjords.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0px;
margin: 0px;
background-position-y: 100px;/*the value must be the same height as the banner */
}
#Wrap {
position: absolute;
}
<div id="Wrap">
<img src="http://url.to/banner" />
</div>
You can easyli solve this using JavaScript. The Backgroundposition will be automatically set under the banner, without knowing the height of it.
var body = document.getElementById('body-margin');
var banner = document.getElementById('banner');
body.style.backgroundPositionY = banner.offsetHeight + 'px';
body {
background: url("http://simonakoleva.me/wp-content/themes/hitchcock/images/bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0px;
padding: 0px;
}
#Wrap {
background-color: #345370;
text-align:center;
}
<body id="body-margin">
<div id="Wrap">
<img id="banner" src="http://simonakoleva.me/wp-content/uploads/2017/05/mybanner.jpg" />
</div>
</body>
Here is also your updated fiddle: https://jsfiddle.net/morL1zka/2/
so I have this code:
<html>
<head>
<style>
html {
background: url(bg_image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<img src="logo.png">
</body>
</html>
How can I add brightness to my background image, without impacting logo.png ?
EDIT: I tried adding the line "filter: brightness(0.5);" to the css, but the logo and everything else is impacted since this property applies to the whole HTML code. How can I overcome this problem?
Thanks
You can put the background in it's own unique element and use a negative z-index to put it behind the rest of the content.
body {
min-height: 300vh;
}
.bg {
background: url('http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg') no-repeat center center / cover;
filter: brightness(0.5);
position: fixed;
z-index: -1;
top: 0; left: 0; right: 0; bottom: 0;
}
<div class="bg"></div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
You can use additional library to make your work easy;a library like material Ui gives you something called paper, it acts as a wrapper and therefor you can change property and attribute of it easily.
As in the above said changing z-index: -1 is a good point to start.
<head id="Head1" runat="server">
<title>Title</title>
<style>
.parallax
{
/* The image used */
background-image: url(Pictures/BackUS.png);
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="parallax"></div>
"aa" is the page which the code is in, the picture is the folder "Pictuers" and it's named BackUS.png. All of it in folder "User".
How to write this line:
background-image: url(Pictures/BackUS.png);
If the Pictures Folder is in the same folder as the html code this should work. Please be aware the div must have a size to see the picture in the back. (You should adapt the size to the picture pixels.)
<body>
<style type="text/css">
.parallax {
/* The image used */
background-image: url(Pictures/BackUS.png);
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div class="parallax" >Hello</div>
</body>
You're missing the quotes around the path.
background-image: url("Pictures/BackUS.png");
Try this,
background-image: url(../Pictures/BackUS.png);
I am currently working on a really simple splash screen for a game I am developing and wanted to just create a responsive background image (not familiar with responsive stuff personally).
I have it working for the most part (in Google Chrome and IE), but the problem is when I open the page in Firefox, the background is pushed up:
HTML:
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body id="bg">
</body>
CSS:
html, body, aside {
display: block;
margin: 0;
padding: 0;
}
#bg {
background-image: url(../images/bg.png);
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
}
Any tips on how to resolve this, and make sure the page works in all browsers would be appreciated!
Try this:
html {
background: url(../images/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Tested in firefox. Working fine.
I have a webpage that changes the background image as you scroll to new sections of the page. It can be viewed here. I am having trouble getting the changing background images to show up on IE7/8. I tried using css3pie, but it doesn't seem to be working. Here is a sample of my html right now:
<!-- background image section w/ text on top -->
<section id="anvil" class="bg">
<div class="center text">
<p class="imageCopy">Stunningly beautiful colors...</p>
</div>
</section>
<section class="divider">
<!-- this is the divider section -->
</section>
<!-- new background image section -->
<section id="office" class="bg">
<div class="center text">
<p class="imageCopy">at a price you can afford.</p>
</div>
</section>
and the css:
#anvil {
background-image: url(/images/anvil.jpg);
-pie-background: url(/images/anvil.jpg) no-repeat;
behavior: url(/PIE-1.0.0/PIE.htc);
}
#office {
background-image: url(/images/office.jpg);
-pie-background: url(/images/office.jpg) no-repeat;
behavior: url(/PIE-1.0.0/PIE.htc);
}
.bg {
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: 0 -80px; /* IE 8 fix */
background-position: 0 -5rem;
height: 47rem;
height: 750px; /* IE 8 fix */
}
.divider {
background-color: #000000;
height: 29rem;
height: 464px; /* IE 8 fix */
}
It's difficult for me to determine what exactly is causing the issues with IE as well, so I might be on the wrong track with the background properties (e.g., sections are not supported by IE 7/8, but I think I fixed that). Any advice would be greatly appreciated! Thanks!