I am using fullpage.js for parallax scrolling. Is it possible to make the background images responsive in nature when i re-size my window.
https://github.com/alvarotrigo/fullPage.js
Below is the example i am using.
https://github.com/alvarotrigo/fullPage.js/blob/master/examples/backgrounds.html
If you notice each of my section has the background-size property with cover, but its still not responsive when i re-size.
#section0,
#section1,
#section2,
#section3{
background-size: cover;
}
Look i don't know too much about fullpage.js
But i don know about resizing image according to your window size.....
first of all download any image and i named it sa.jpg
<html>
<head>
<style type="text/css">
#box{
width:100%;
}
<!--This class is added to img element to make it responsive -->
img.responsive{
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<div id="box">
<img src ="sa.jpg" class="responsive"></img>
</div>
</body>
</html>
In above code we kept image within #box div. and we also added responsive named class to img element.Assign it a max-width value of 100%. This allows the width
to adjust to the browser width changes. Next, add a dynamic height property to the class.
Above code is responsive for img element..
Now if you want to use background image css property and resize your image according to screen size
<html>
<head>
<style style type="text/css">
#box{
width:100%;
height:100%;
background-image:url("sa.jpg");
background-size:100% auto;
background-repeat: no-repeat;
}
<!--img.responsive{max-width:100%;height:auto}-->
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
This one works best for me
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
Related
I have a background image (picnic scene), and I copied out one of the donuts on it to place it over the original donut, and make only that area clickable. It has to stay in place, so that any user regardless of monitor size or window resizing will see the donut in that place and not in different places for different resolutions.
I used percentages for the donut to try to make it responsive and move and resize together with the background. When you resize the window, the picnic and donut resize fine, but the donut also moves around, it won't stay in place.
I want only the separate donut to be clickable, not the original one behind it, so that the user will understand that they have to click specific things.
I thought of maybe using some kind of overlay solution, but there's no way to make a "hole in the image", only to make a transparent area.
I have a few other scenes which have the exact same problem, but the backgrounds are a gif in one and a video in the other, so even if the overlay could solve it, I would have to do a lot of editing frame for frame in the gif and then get video editing software for the video.
Here's the minimal example and recreation of the problem:
body{
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-image: url("https://www.bettycrocker.com/-/media/GMI/Core-Sites/BC/Images/BC/content/menus-holidays-parties/parties-and-get-togethers/modern-picnic-ideas/Modern-Picnics.jpg");
}
#donut {
width:10%;
margin-left:50%;
margin-top:40.5%;
color:#fff;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
#donut:hover {
width:30%;
}
<!doctype html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="movie">
<div class="scene" id="picnic">
<img class="clickable" id="donut" src="https://i.postimg.cc/7h3kFgX8/donut.png"/>
</div>
</div>
</body>
</html>
I saw this suggestion but I don't understand how it fits into my situation or how/where the solution is to be added in my case: How to prevent image moving when resizing window
I should also add that another reason why I copied out the donut to put it back in is because I want to animate it on hover (as you can see when you test it), so the user sees it's interactable.
Seems that I managed to fix it. It started behaving when I changed background-size: cover; to background-size: 100% 100%;.
body{
margin: 0;
}
#picnic{
width: 100%;
height: 100%;
position: absolute;
overflow:hidden;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-size: 100% 100%;
background-image: url("https://www.bettycrocker.com/-/media/GMI/Core-Sites/BC/Images/BC/content/menus-holidays-parties/parties-and-get-togethers/modern-picnic-ideas/Modern-Picnics.jpg");
}
#donut{
width:9.3%;
height: 8.2%;
left:50.5%;
top:72.2%;
position:absolute;
}
#donut:hover{
width:21.3%;
height: 16.8%;
top:65.2%;
left:42.5%;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div id="picnic">
<img id="donut" src="https://i.postimg.cc/7h3kFgX8/donut.png"/>
</div>
</body>
</html>
Now I can resize the window, and the donut will stay in place, and yet expand in the same proportion I want it to expand.
Try using the HTML<area> tag. This allows you to map coordinates to the donut. As in you don't even need to create a new element just specify where it is. It should work on videos too.
Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area
earlier it was good but now when I put width and height 100% it doesn't really displays 100% instead a 10 px margin come on all four sides
here's what I tried
<html>
<head>
<style>
.cont img {
display: inline-block;
width :100%;
height : 100%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
</html>
what can I do to make it 100% with in any browser?
have a look at this code, set margin:0px on body tag
<html>
<body style="margin:0px; ">
<div style="background-color:red; width:100%;">
hello
</div>
</body>
</html>
Question is not 100% clear, but are you looking for a solution like this?
.container {
height:100%;
width: 100%;
border: 1px red solid;
margin:0;
padding:0;
line-height: 0;
}
.container .imgmy{
height:100%;
width: 100%;
margin:0;
padding:0;
}
Are you sure it was good earlier?
The margins around the image have nothing to do with the image itself.
Browsers define default styles in a so called User Agent Stylesheet. In this case, the white border is the 8px margin (that is in Chrome) on the body.
Luckily you can easily override these user agent stylesheets, and you should in this case.
You can add margin:0 to the body, as mentioned above by Shreya.
But to avoid similar 'errors' it is a good idea to include a reset.css or normalize.css. These files "make browsers render all elements consistently and in line with modern standards" (http://cdnjs.com/libraries/normalize). You don't have to write one yourself, others have done this for you, like Nicolas Gallagher: http://necolas.github.io/normalize.css/
Read more about User Agent Stylesheets here: What is user agent stylesheet
Assuming HTML
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
CSS
.cont img {
max-width: 100%;
max-height: 100%;
}
In all browser I use the following css rules, and it works
// it fits the background image to container
background-size: contain;
background-size: cover;
Are there css rules to make it work in IE8 also, or should I use javascript?
In case of javascript I am using jquery.
What is the best way to active my goal?
I had also the same problem but by going through this below link my problem solved
http://css-tricks.com/perfect-full-page-background-image/
There's a jQuery plugin or this javascript fallback with filter
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
Check the same page for more cross-browser methods
you can do it like this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="http://i47.photobucket.com/albums/f156/Bob_McBobBob/Awesome_Background_by_smirfy.jpg" class="bgimg" />
<div class="frame">
<div class="contents">
page contents
page contents
page contents
page contents
page contents
</div>
</div>
</body>
</html>
css:
html {
background:#000;
}
html, body {
padding:0;
margin:0;
overflow:hidden;
height:100%;
}
.bgimg {
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
.frame {
color:white;
width:100%;
height:100%;
overflow:auto;
}
.contents {
padding:10px;
}
demo site: http://jsbin.com/enevov/1/edit
you can achieve different effects by changing
width:100%;
height:100%;
on .bgimg, to accomplish different effects, depending on whether you want a distortion or not, for instance just width: 100% will make it touch across the top, etc...
hope this helps -ck
This works for me to stretch image on full window in IE8
http://css-tricks.com/perfect-full-page-background-image/
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to align a <div> to the middle of the page
This is a simple question with what should be a simple answer but I don't know how to do it.
Well, use this code:
<html>
<head>
<style type="text/css">
body{
min-width: 710px;
}
#backdrop{
min-width: 710px;
max-width: 710px;
}
</style
</head><body>
<div id="backdrop">
</div>
</body></html>
How do you get #backdrop to center on page load and stay centered on the page when you resize? (until you resize to less than 710px wide, then the horizontal scroll bar would appear)
Knowing this information would improve the layout quality of my page immensly and I could probably do it if I had a more adept knowledge of javascript and jQuery... but I don't yet.
If all you need is to have the #backdrop div centered horizontally, there is no need for javascript. The whole thing can be achieved through CSS.
#backdrop{
display:block;
width: 710px; //just specify the width. no need for min-width or max-width if this is not meant to change.
margin: 0 auto; //this will center the div in its container
}
You don't need javascript to do this, just try:
<html>
<head>
<style type="text/css">
body{
min-width: 710px;
}
#backdrop{
width:710px;
margin:0 auto;
}
</style
</head><body>
<div id="backdrop">
</div>
</body></html>
[EDIT] This was already answered on stackoverflow: How to align a <div> to the middle (horizontally/width) of the page
I'm not really sure about what you want, but:
#backdrop{
width:710px;
margin: 0 auto;
}
I'm working on a layout where the main content div will have a with of 970px. Behind this div, I want a div with dimensions 1200x600px (it will contain a flash object) positioned like so:
width:1200px;
height:600px;
position:absolute;
left:50%;
margin-left:-600px;
The problem is when the browser is sized to a width smaller than 1200px it get the horizontal scroll bar. I can fix that by:
body {overflow-x:hidden;}
But I DO want it to have the horizontal scroll bar when it get sized to less than 970px in width.
Basically, I am trying to get the 1200px div to behave more like a css background image. Any ideas?
This works without JavaScript:
<body style="margin:0">
<div style="position:absolute;width:100%;height:600px;overflow:hidden;min-width:970px;z-index:0;">
<div style="position:absolute;width:1200px;height:600px;left:50%;margin-left:-600px;">
--flash object--
</div>
</div>
<div style="position:absolute;width:100%;z-index:100;">
--main content--
</div>
</body>
UPDATE:Had to make changes to accommodate your absolute div positioning (the parent div has to be absolutely positioned as well)
A solution is possible entirely with CSS. The key pieces are position: fixed and z-index: -1. The two DIVs in this example are siblings, but there are other possibilities. This solution works with the latest versions of Chrome, FireFox, Safari, Opera and MSIE.
This does not work with MSIE6, which doesn’t correctly implement the z-index style, but there is an MSIE6-compatible solution (which shows the scrollbar at 1200px) if you’re able to rearrange things and add a DIV wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html title="html">
<head>
<style type="text/css">
#content
{
background: #ffffe8;
height: 500px;
margin: 0 auto;
width: 970px;
}
#background
{
background: #ffe8e8;
height: 600px;
left: 50%;
margin-left: -600px;
position: fixed;
top: 0;
width: 1200px;
z-index: -1;
}
</style>
</head>
<body title="body">
<div id="content" title="#content">
<p>content</p>
</div>
<div id="background" title="#background">
<p>background</p>
</div>
</body>
</html>
you could use the onresize event and when its less than 970px, change overflow-x to auto or scroll.
if you are using jQuery, look up the .resize() method
I would use a CSS3 media query.
body{overflow:hidden;}
#media only screen and (max-width: 970px) {
body{overflow:visible;}
}
First set the overflow on the body to be hidden so that it does not scroll. Then when the screen is less than 970px, set it back to visible so that it will scroll.