I have added css property correctly in style.css and all other things are also right but still its not getting on screen
css:
.header {
width: 100%;
height: 100vh;
background-image: url(background.png);
background-size: cover;
background-position: center;
}
html:
<body>
<div class="header" id="header">
</div>
</body>
You might have linked to the Styles.css file incorrectly, try using this CSS code in the head tag using the tag and see the result or make sure your code referencing the styles document is something along the lines of
<link rel="stylesheet" href="styles.css">
Let me know if it works/ if you have another problem
You need to reset the default browser properties, after that it will work. Also you can write like this or can use normalise.css or reset.css libraries for the same.
It works fine without resetting the default value if fixed value of height and width is given but doesn't work with vh
*{
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 100vh;
background-image: url(background.png);
background-size: cover;
background-position: center;
}
<body>
<div class="header" id="header">
</div>
</body>
Related
I need a wordpress theme or any plugin which looks like https://www.haldiram.com/ this and work like this. I want to make same home page and header in wordpress, can anyone help me about this in wordpress. Tell me how the same thing is possible using any plugin or using any theme, or tell any another way to do this. I try make background like this using css but didn't get success. i dosen't need exact same but if someting smillar to this tell me.
The important thing is to add the background-attachment: fixed; CSS property.
Also you need to have the page content height bigger than the window in order to see the scroll effect.
In the demo below I added a min-height: 2500px; on the .site-content page element.
body {
background-image: url("https://www.haldiram.com/themes/haldiram/images/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.site-content {
width: 100%;
max-width: 1200px;
min-height: 2500px;
background-color: #fff;
padding: 2rem 3rem;
box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="site-content">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div><!-- .site-content end -->
</body>
</html>
I have this code:
div#fond {
background-image: url('https://www.thetileapp.com/images/Purse_Tabletop-46.jpg');
background-size: cover;
height: 100%;
width: 100%;
}
<!DOCTYPE html>
<html>
<body>
<div id="fond">
ABCD
</div>
<br>
<img src="https://www.thetileapp.com/images/Purse_Tabletop-46.jpg" width="100%" />
</body>
</html>
How can i do to make the div have the same behaviour than the img, so that the height of the div adapt itself to the width of the window.
For the moment, the height is adapted to div content.
For percentage height to work, you must add html, body {height: 100%;} otherwise the browsers will not be able to calculate a percentage of auto which is the default. Percentage heights work based on parnet, when the parent is body/html, you need to add the rules I mentioned.
Alternatively, you can use the viewport units (vw/vh), like:
div#fond {
background-image: url('https://www.thetileapp.com/images/Purse_Tabletop-46.jpg');
background-size: cover;
height: 100vh;
width: 100vw;
}
I'm doing some coding for a tumblr theme and running into this problem: "background attachment: fixed" doesn't stop the background image from scrolling up and down; it still moves with the content.
HTML
<div id="content">
<div id="posts">
posts...
</div>
</div>
CSS
#content {
background-image: url('{image:Background Image}');
background-repeat: no-repeat;
background-attachment: fixed;
height: auto;
width: calc(100% - 300px);
float: right;
}
The width doesn't work either, but I've been told that's just how fixed works, and I'm just looking to fix that fact that the image still moves.
Sometimes the theme's css file can override your custom edits. Try placing !important in the background-fixed property like this:
background-attachment: fixed !important;
Still haven't discovered why it's not working, but I have discovered an alternative:
Create a separate image for the background and place this above the content in an img tag...
HTML
<img id="image" src="source" />
<div id="content"></div>
...then use this handy CSS layout to make the image appear beneath the content
CSS
#image {
height: 100%;
width: 100%;
position: fixed; //to prevent scrolling
z-index: -1; //sets z-index, which wasn't working in my previous setup
}
#content {
background: transparent;
position: absolute;
z-index: 1;
}
JSFiddle: http://jsfiddle.net/Minecraft_Percabeth/ah6qkj8e/
I have an iframe and i need it to have a scrolling overflow. it seems work out in desktop, i used a work around to make it work in iOS. it works on android and iOS now. however, iOS8 it fails.
<html>
<body>
<style type="text/css">
.scroll-container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#iframe_survey {
height: 100%;
}
.scroll-container {
height: 100%;
width: 100%;
overflow: scroll;
}
</style>
<div class="scroll-container scroll-ios">
<iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
</div>
</body>
Use the code in this way
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe style="width:100%;height:600px" src="www.iframe.com"></iframe>
</div>
In order to make an iframe scrollable on iOS, you have to add the CSS3 property -webkit-overflow-scrolling: touch to the parent container:
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe src="./yxz" style="width:100%;height:100%">
</div>
I finally got mine working after many hours and testing. Basically what worked for me was this (shown as inline styling to demo).
Making the outer div overflow auto keeps it from displaying an extra set of scrollbars on desktops.
<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe src="http://www.mywebsiteurl.com" style="width: 100%; height: 600px; display: block; overflow: scroll; -webkit-overflow-scrolling: touch;" ></iframe>
</div>
it did not work for me! but I could figure out a little trick after reading this post:
https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/
Just put an !important after that and works just fine!
-webkit-overflow-scrolling: touch !important;
overflow-y: scroll !important;
I found that fixes 1 and 2 work on iOS 11, but I also found that in loading a responsive page into the iframe, overflow-x: hidden; was also needed to keep the iframe from moving left and right on scroll y attempts. Just FYI.
There is a bug in iOS 8 that breaks scrolling all together when -webkit-overflow-scrolling:touch has been applied to anything that is overflown.
Have a look at the issue I posted a few weeks ago:
-webkit-overflow-scrolling: touch; breaks in Apple's iOS8
The must is define your scroll-container to fixed for the div is a fullscreen size. Then inside the iframe create a main content who have a properties scrolling.
Inside you iframe, in the mainContainer-scroll, you can add:
-webkit-overflow-scrolling: touch //For active smooth scroll
-webkit-transform: translate3d(0, 0, 0) //For material acceleration
overflow-y:scroll; //For add scrolling in y axis
position:absolute;height:100%;width:100%;top:0;left:0; //For fix the container
Main page
<html>
<head>
<style type="text/css">
#iframe_survey {
height: 100%;
}
.scroll-container {
height: 100%;
width: 100%;
position:fixed;
}
</style>
</head>
<body>
<div class="scroll-container scroll-ios">
<iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
</div>
</body>
</html>
Inside Iframe
<div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;top:0;left:0;-webkit-overflow-scrolling: touch;-webkit-transform: translate3d(0, 0, 0);overflow-y:scroll;">
<div class="Content" style="height:2000px;width:100%;background:blue;">
</div>
</div>
Not knowing what is on the other end of "www.iframe.com"...but for me, in that file's css I added:
body {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
That fixed it.
You have to use on body style or
overflow:scroll;
Or also use
<div style="width:100%;height:600px;overflow:auto;-webkit-overflow-scrolling:touch">
<iframe style="overflow:scroll;" src="www.iframe.com"></iframe>
</div>
I was able to make an iframe scroll in iOS by placing an iframe inside a div (which acts as container) and apply the styles as follows and this works perfectly.
.iframe {
overflow: scroll !important;
width: 100%;
height: 100%;
border: none;
}
.div {
overflow: hidden;
width: 100%;
height: 100%;
border: none;
background-color: #FFF;
}
As i am working in GWT, for GWT people here is the suggestion.
In case of GWT just place an iframe in ScrollPanel (div) and apply the styles as above.
I've made a webpage that has an 4000px wide background and in Chrome and safari on Windows, Mac and iPad it scrolls nice. I can scroll to the left, the top and the right with no problems, just like you would expect it to be.
But when I convert this page to .wdgt-format, import it into iBooks and preview it on the iPad (4) the page will not scroll in any direction.
I've tried adding overflow: scroll;
-webkit-overflow-scrolling: touch; to the CSS of the body and the container but this won't fix the problem.
The HTML
<body>
<div id="container">
</div>
<body>
The CSS
/* General */
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, sans-serif;
}
#container {
width: 10158px;
height: 974px;
background: url(../img/1B.jpg) no-repeat;
-webkit-background-size: 10158px 974px;
}
Does anyone know how to solve this? Is it a CSS or a JavaScript problem?
Thanks in advance.
Have a look here:
https://github.com/edwilde/iBooks-HTML-Widget-Boilerplate
This is a boilerplate specifically for building for iBooks, which apparently targets & fixes your problem specifically.
Another suggestion would be using an iFrame, something like:
<div id="container" style="overflow: scroll; -webkit-overflow-scrolling: touch;">
<iframe width="4000" height="100%" src="">
</iframe>
</div>
Have you added in your head something like?
meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0"