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?
Related
Been writing code for the background of a website. The goals are 1) 100% height of the browser window for the first image 2) image stays centered in window and sides are cut off 3) on the home page there is also two additional images that need to have the same effect. Been trying and writing different code chunks and not getting anywhere. I can get one part which just breaks another. Thank you for any assistnaceCurrent code chunk is as follows:
<html>
<head>
<meta charset="UTF-8">
<title>Background Image</title>
<style>
* { margin: 0; padding: 0; }
.background {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div class="background">
<img src="images/bg.png">
</div>
<div class="background bg2">
<img src="images/bg2.png">
</div>
</body>
</html>
Not sure if I fully understand what your question is but for your image to get the height of the window you need to
.background {
background-image: url(images/bg.png);
height: 100vh;
}
That way the background image will always use the full height of the viewport. Not sure about the rest of the question tho!
If I understand what you are trying to do, there are a few things with your code that is wrong. First I will explain a couple of things and then I'll provide the code that I came up with that works when I tested it. Here goes...
First, in your style element, where you have ".background:", you don't need any of the code that you wrote. The stuff that mentions webkit, moz, etc. is really for stuff that may have cross browser compatibility problems. background-size is not one of those things you would have to worry about with that. The only thing I would put in your "background" class is width and height of 100%.
Second, speaking of width and height, I would include and "html" and "body" element and give them both a width and height of 100%.
Third, you are trying to have your images listed in your html, but you are trying to style them as if you are having your css produce them. Notice how in my html I left the "background" divs empty and then included the url of the photos in the css.
In a nutshell, I believe you may be a little confused as to what method should be used and when/where, because you are actually fusing different approaches together. That said, here is the code I wrote...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background Image</title>
<style>
* { margin: 0; padding: 0; }
html, body {
width: 100%;
height: 100%;
}
.background {
width: 100%;
height: 100%;
}
#bg1 {
background: url(images/bg.png) no-repeat center;
background-size: cover;
}
#bg2 {
background: url(images/bg2.pngg) no-repeat center;
background-size: cover;
}
</style>
</head>
<body>
<div class="background" id="bg1">
</div>
<div class="background" id="bg2">
</div>
</body>
</html>
Here is a link that may help you too. They have great directions, exercises and tutorials: w3schools.com
Hope all of that helps Zack! :)
I have created this page and it is working fine, I'm having issue regarding the resizing, when I do resize the browser my page cropped and couldn't scroll to reach it. This is my HTML Code
<body id="page-top">
<style type="text/css">
#media (min-width:1500px) {
.new_bg {
background-image: url(img/bg2000.png);
background-size: cover;
background-repeat: no-repeat;
min-height: 50%;
}
}
in my CSS code:
html,body {
width: 100%;
height: 100%;}
Apologize if I didn't catch the needed portion of code, you may refer for the page to try, thanks.
UPDATE
]2
In you page CSS,
#media only screen and (orientation:portrait){
header{
display:none;
}
}
This is causing your page to go invisible when you resize your window. When you start resizing your window, at some width and height, the orientation is becoming as portrait and whole page is set to display:none.
Based on your question, I feel like, you don't need that style, as your query was like you are unable to find the content on resize.
Update
Your .header-content style is having -webkit-transform:TranslateY() and transform:translateY().
This is making your content to move up and making your page start position outside the browser view. Please remove these two.
Your header-content is having padding values, making your main content to move some pixels to the right. This is causing overflow. Please remove this as well.
#media (max-width:1500px) {
.new_bg {
background-image: url(img/bg2000.png);
background-size: cover;
background-repeat: no-repeat;
min-height: 50%;
}
}
change min width to max width try thiss...
lets say i created a div with an id of header like this
<div id="header"></div> and on the css i write
#header{
width:100%;
height:100px;
background-color:#00ff00;
margin:0;
padding:0;}
well this creates a full width header but when i re size the width of the browser and using the scroll bar i scroll right i find that the background doesn't reach the full width of the browser its the same thing with when i use a background image does anyone know a solution to this
First of off, if you're going to be using this truly as a header you should use the
<header> tag to keep your HTML semantic instead of the usual <div> approach.
Second, you may be seeing 100% width issues due to default formatting on <html> and the <body>
If you want to have a full width header, you'll need to do something like this:
html,body{ /* basic html, body reset */
height: 100%;
width: 100%;
padding: 0;
margin: 0 auto;
}
#header{
width: 100%;
height: 250px; /* easier to visualize with a larger header size */
background: url('someimage.url');
background-size: cover;
background-position: center;
}
The background-cover css property is very useful to maintain aspect ratios especially if this is for a responsive site.
CSS
#header {
width:100%;
height:100px;
background: url(http://oi49.tinypic.com/9kpge0.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
}
DEMO
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
I really need some help with a background on a website. You can see the image here:
Link to image
Now what i want is first of all to have the image placed in the top middle. Then i would like to have something like 10x250px (Width x Height) from the left of the image to be repeated - should a visitors screen resolution be wider than the image it won't seem like the site just stops at the edges.
I've tried several things, but it seems i keep running into different kind of technicalities that I'm not sure how to get around. So I would like to know how you would do it?
(The websites content will be 990px wide if that helps)
But the repeating image on your <body>, and put the other image background on your wrapper <div> (or similar).
Alternatively, you can use CSS3 for multiple background images on the same element. Won't be as compatible though.
Here is a way to accomplish this so that it attempts to center for all screen resolutions so that there is never a bottom scrollbar. bg.gif is your image ang bg_filler.gif is a 20px slice off of the side.
<style>
body
{
background-image: url(bg_filler.gif);
background-repeat: repeat-x;
background-color: #D1CDCA;
margin: 0px;
}
.backgroundPart
{
height: 300px;
background-image : url(bg.gif);
background-position: top center;
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div class="backgroundPart">
</div>
</body>
Here is a sample http://www.wesgrant.com/samples/BackgroundSample/default.html
Something like this style:
<style>
body{
margin:0;
padding:0;
background-image:'repeating_image...';
background-repeat:repeat-x;
}
#wrapper {
width:990px;
background-image:url(http://img852.imageshack.us/img852/4169/testbg01.jpg);
}
</style>
You would want to create two images, one for the body to repeat, and the other being the header that you already have. here is your image in a demo.
take a look at the source code to see how this works
http://luistovar.com/sodemo
No matter how large the screen resolution is now, the bg repeats.
Good luck
<!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">
<head>
<style type="text/css">
<!--
* {padding:0px; margin:0px;}
body {
background-image: url(repeat.jpg);
background-repeat:repeat-x;
background-position:top;
}
#header {
background-image: url(header.jpg);
background-repeat:no-repeat;
width:1600px;
height:252px;
margin:0px 0px 0px 0px;
}
-->
</style>
</head>
<body>
<center>
<div id="header"></div>
</center>
</body>
</html>