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.
Related
I did some UI practice and there is a problem with the background-image to body tag. The image is overflowing horizontally and I want to get rid of that. Plz help me.
Code how I tried to fixed it.
<style type="text/css">
body {
background: url("public/res/bg(WT).png") no-repeat fixed center center;
background-size: cover;
}
</style>
The problem illustration : (red box)
My full code is like
<html>
<head>
<style>
* { margin:0; padding:0; }
body {
background: url("public/res/bg(WT).png") no-repeat fixed center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
//contents are here
</body>
</html>
Try this
* { margin:0; padding:0; }
body {
background-image: url("http://unsplash.it/2500/1000");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:center;
background-attachment: fixed;
}
<body>
</body>
wrap the entire content below <body> with a div and apply overflow: hidden for it.
.wrapper {
overflow: hidden;
}
https://i.imgur.com/gPpaxlH.png take this as a reference. i have wrapped everything except the script and the div as i think that was generated with JS. remove overflow-x from <body>
in any project, make it a rule to follow this.
profit website for an organisation.
this is the link www.notevayaslionel.com
Website is great in desktop however when you go mobile you can see that apparently the image in the background is bigger than the window screen and you can scroll sideways.
How con I solve this? I dont want any sideway scrolling.
This is my CSS:
/* Parallax Background ==================================================*/
#parallax {
height:100%;
width:100%;
top:0;
position:fixed;
background-image:url(https://trancazos.files.wordpress.com/2016/06/las-redes-sociales-a-messi-no-te-vayas-lio.jpg?w=1024);
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: -100;
}
Add this to your styles . It will make your website responsive:
#centeralign iframe {
width: 100%;
max-width: 500px;
}
I am testing out the parallax scrolling effect, in which there is a background picture and by scrolling, you can see different parts of the picture. The problem is, when I zoom out the page, the picture repeats, which is ugly. I have tried no-repeat; and it only makes the picture stay in one corner, and I have tried background-size: cover; which makes the page scrollable to sides which I don't need.
How to deal with this?
EDIT: I'm sorry for forgetting to post the code.
HTML & CSS:
.parallax {
background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
}
.parallax-inner{
padding-top: 10%;
padding-bottom: 10%;
}
<section class="parallax">
<div class="parallax-inner">
<h2>My First Heading</h2>
</div>
</section>
Example: http://prntscr.com/9jv8d4
Zoomed out: http://prntscr.com/9jv8sd
No-repeat; http://prntscr.com/9jv94p
Cover and on 1920x1080 screen, default 100% zoom; http://prntscr.com/9jv9ur (page is scrollable to the far right side)
try to change your css code to be as following:
body {
margin: 0;
}
.parallax {
background: url(latest-space-wallpaper_110926700_30.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.parallax-inner{
padding-top: 10%;
padding-bottom: 10%;
}
i tested it on my own and works fine, hope this will help you.
resource will be useful for you:
https://css-tricks.com/perfect-full-page-background-image/
just use
body{
margin: 0;
padding:0;
}
I'm trying to create a responsive website but ran into a problem with the background. It doesn't stretch the way it should.
Here's a fiddle with my code: http://jsfiddle.net/8jd1hax4/
And here's the bit of my CSS with the background
body{
background-image:url('Background.jpg');
background-size: cover;
background-repeat:no-repeat;
background-position:center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-content-zooming: none;
max-width:100%;
max-height:100%;
font-family: 'Scout', arial, sans-serif;
color:#fff;
}
You can best see my problem when you make the fiddle more narrow, the white space appears at the bottom. It also shows the white space on my mobile, which is weird because I added a media query for that size.
Any idea how to get it to stretch all the way to the bottom? I've tried adding a transparent border and padding on the bottom, both to no avail.
Thanks! :)
The problem with having the background on the body is that the body is not necessarily the full screen, but only as much of the screen as has content. So when you resize and the content gets shorter, the body gets shorter.
One solution would be to put a wrapper tag around your content:
<body>
<div class="wrapper">
(All other content goes here)
</div>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
.wrapper {
background-image:url('http://capeanntunaclub.com/images/Background.jpg');
background-size: cover;
background-repeat:no-repeat;
background-position:center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-content-zooming: none;
position:absolute;
width:100%;
height:100%;
overflow: scroll;
font-family: 'Scout', arial, sans-serif;
}
Fiddle: http://jsfiddle.net/8jd1hax4/2/
For the record, here's another option for you: http://jsfiddle.net/panchroma/xrz4v4L4/
The important bit is that I'm setting the background image on the html element, so it's sure to include the full height of the browser window.
html {
background: url(http://capeanntunaclub.com/images/Background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The credit for this and other solutions goes to http://css-tricks.com/perfect-full-page-background-image/
Good luck!
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*/
}