I'm trying to put a image background in a fullscreen div.
What's working:
load the code in a browser
reload the page
the background should display correctly
The problem:
load the code in a Chrome browser
make sure the page is scrolled down
reload the page
the background is mangled
I would not using the <html> tag as I need to swap the background and do animations which would corrupt the html.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #background { height:100%; margin:0px; }
#background{
width:100%;
top: 0;
position: fixed;
background: url(http://lorempixel.com/400/200/sports/) no-repeat center center #fc0;
background-size: cover;
background-attachment: fixed;
z-index: -1;
}
#content { background: #0cf; width:400px; height:2000px; margin: 0 auto; }
</style>
</head>
<body>
<div id="background"></div>
<div id="content">The content</div>
</body>
</html>
Please note I'm not using JSfiddle as to test this behaviour we actually need to reload the page.
Here's some images, sorry for the delay in my reply!
1) Here is what happens when I first load the page
2) When I scroll down
3) If, while my scrollbar is down, I reload the page I get this!
The background image is distorted by default as the background image is very small 400 x 200 px.
I don't see any difference when reloading the page except that the image is changing.
Have a better resolution image to avoid distortion in bigger screens
Related
I want to have my background as gradient and the image on top of the gradient, it worked just fine until I set overflow to auto since my div tag expands on mobile view which makes overflow hidden for the html tag not reliable so I made the image as a tag
.background_image {
position: absolute;
left: 0;
top: 0;
opacity: 0.3;
width: -webkit-fill-available;
height: -webkit-fill-available;
}
EDIT
I have made the image's position fixed so it keeps following the scroll position which wasn't exactly what I needed but It'll do.
EDIT 2
The problem was I was using linear gradient bg on behalf of the image which was a tag inside the body element, i fixed it by letting that image at fixed position and the change bg to radial gradient and making that gradient only styling the body tag which did solve the whole problem
Please check below code taken from here
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://via.placeholder.com/800");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg"></div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
You can use the background with url property:
.background_image {
background: url(YOUR_IMAGE_URL) no-repeat center center fixed;
width: 100%;
height: 100%;
}
I've created a page that scales large images to fit the window, however it does not allow the user to zoom once the image is loaded and scaled to fit. I want the initial view size to be as realized by the css as shown below, but thereafter I want the user to be able to zoom (or pinch-zoom on mobile/touch-screen devices), as well as Ctrl+0 to return to the initial view size. How can I accomplish this? Here's the complete code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: fixed;
max-width: 100%;
max-height: 100%;
top:0;
left:0;
bottom:0;
right:0;
margin: auto;
}
</style>
</head>
<body>
<img src="LARGE_IMAGE.jpg">
</body>
</html>
You should make width on viewport. Device width wouldn't change after that anyway.
Yello,
Have been trying to figure this problem out for a while, asked a friend, a developer collegue.. No succes. Maybe one of you knows the answer?
I use an SVG image as background for my header:
CSS:
header {
height:200px;
width:100%;
background-image: url("../img/header.svg");
background-repeat: no-repeat;
background-position:0% 100%;
background-size: 100%;
}
HTML:
<header id="header"></header>
In every browser it displays perfectly but in IE(11) there is a space between the header and content on small screen sizes, the gap differs. I use Bootstraps responsive classes.
I have an HTML file as shown below. It uses the "background-size:cover" setting on element.
When I open the file using the File/Open option on IE9, it shows the background image covering the entire window. This is expected behavior.
But, when I open the same file via an Apache server (http://127.0.0.1/test.html) the background image does NOT cover the entire window horizontally..... it leaves a blank vertical strip on the right end of the window. This is NOT expected behavior.
I see the same behavior with other background image files too. It seems that when getting the HTML page from Apache server, the "background-size:cover" setting will only enlarge the image upto some extent. But when getting it using the File/Open option, it enlarges the background image enough to cover the entire element width.
And, also see similar behavior with other settings of the background-size value (e.g. when I set background-size:100% 100%;).
Here's the HTML file:
<html>
<head>
<style>
body
{
background:url('desert.jpg');
background-size:cover;
background-repeat:no-repeat;
}
</style>
</head>
<body>
This is a line
</body>
</html>
Try this code, it's should resolve your issue:
<style>
body
{
background: url("desert.jpg") center center fixed no-repeat;
background-size: cover;
background-color: #000;
overflow: auto;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='desert.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='desert.jpg', sizingMethod='scale')";
}
</style>
For further explanation read this article: http://cookbooks.adobe.com/post_scale_background_image_to_browser_size-17590.html
Hi everyone,
i make an html page,i want to prevent the page from zoom out after certain zooming out.
my html code is below
<style type="text/css">
.main-container {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
position:relative;
margin:0 auto;
height: 1508px;
width: 1300px;
}
</style>
//main container
<div id='container'>
my contents will be here
</div>
Access to the browser's zoom control state is not scriptable (universally).
See: How to detect page zoom level in all modern browsers?