My background image is fluid only to a certain point. When resizing the browser it starts to shrink
background-image : url("http://...");
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center right;
height: 400vh;
You can see what I'm talking about here
The height: 400vh is your problem I believe if you can put this code on the html element as such
html {
background: url("http://...") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and delete the class "me" from your code this should be fluid for you. The problem is you are setting the background on "me" which doesn't contain any content and its height is only being set by you as "400vh" so once it hits that height it stops being fluid so by setting it on the html it will wrap the whole page and be fluid
Edit
if you desire to have your image not clipped in anyway and show 100% of it on every screen you can do something like this
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto 0px;
}
turn the me class into an image instead of a div
<img class="me" src="http://24.media.tumblr.com/8760c4adc4f8c4b7cafa14c5cf6cc55c/tumblr_n2kq1hnFSF1tswi9io1_1280.jpg"></img>
and the css like this
.me {
width: 100%;
}
this will give you a wrap that will cover 100% of the persons screen size and will allow you to set the image to be in the background and will not clip the image as you resize. If you are trying to make this website responsive I wouldn't suggest using absolute references in your css as this may lead to some items out of place on different screen sizes. You may want to check out www.getbootstrap.com since they provide an excellent library for a responsive grid.
click_hear_demo
css
#wrap{
display:block;
width: 100%
}
body {
margin: 0 0;
position: relative;
}
.me {
background-image : url("http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2013/04/44GHz_image_1.jpg");
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center right;
height: 400vh; /*cia su viewportais reikes padirbet, nes cia realiai procentai kaip ir*/
}
}
html
<body>
<div id="wrap">
<div class="me"></div>
</div> <!-- end of #wrap -->
</body>
Related
I have a background image set as a background, and I want it so, when the user scales down the window, it will resize with it:
HTML:
<div class="parallax">
</div>
CSS:
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
I got it to work when I changed background-size: cover; to contain, but it cuts out some of the image from the left and right side.
Fiddle Link : here
In addition to my comments, here is what I wrote about in the last comment - a regular img tag with width: 100%and height: auto instead of a background-image:
img {
width: 100%;
height: auto;
}
<div>
<img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>
The code below makes the background image responsive too when a window is resized. I have updated your css code, removed min-height and background fixed and made the padding percentage in top and bottom.
.parallax {
background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center / cover;
padding: 30% 0;
}
<div class="parallax">
</div>
Right now my background image adapts to the screen size. The problem is, when the screen shrinks too much (e.g. mobile) the background image is no longer long enough to fill the div vertically.
So what I did was to assign a value to width instead of using 100%:
#content {
width: 2000px;
}
The problem is, the div is no longer responsive, since it has a fixed width.
How to solve this dilemma?
Here's the relevant code:
HTML:
<div id="content">
<div class="container clearfix">
</div>
</div>
CSS:
.container {
position: relative;
margin: 0 auto;
width: 960px;
}
#content {
background: url(images/bg.jpg) repeat 0 0;
background-repeat: no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-attachment: scroll;
background-position: 50% 0;
position: relative;
width: 100%;
height: 750px;
}
#content .container {
height: 750px;
}
And the live site: http://www.m2comm-semi.com/
These two rules
background-size: cover;
background-position: center; /* bottom, top, etc */
should make your background image work properly on every resolution as long as it is big enough to cover f.e. 1900x1200, just give it a shot and let me know if the result is satisfying, bro.
I am trying to make a background image cover the whole screen width and height, and I can't seem to get it right with the height.
I am following these tips to achive it but I don't get it right. It just goes as high as the inner div content can go.
This is the html and css, you can see it in jsfiddle as well:
HTML:
<div class="navbar"></div>
<div class="background-container">
<div class="bg">
<div class="container">
JOIN US!
</div>
</div>
</div>
CSS:
.navbar {
height: 50px;
}
.container {
text-align: center;
padding: 10px;
color: #fff;
}
.bg {
height: 100%;
background: url(https://images.unsplash.com/photo-1431578500526-4d9613015464?q=80&fm=jpg&s=169b4f4e6f3882a03b6b93b2e6848052) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Body tags are not full-height by default. You need to specify that.
html, body {
height: 100%;
}
Demo
To prevent the resulting scroll, remove margin and and padding as well.
Demo 2
If feasible please add position: absolute; width: 100%; height: 100% to your .bg class.
The problem is the .bg is just that container you see. If you want the background like you are describing change .bg to body and it works
body {
height: 100%;
background: url(https://images.unsplash.com/photo-1431578500526-4d9613015464?q=80&fm=jpg&s=169b4f4e6f3882a03b6b93b2e6848052) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
//add this if you want it to stay fixed
background-attachment: fixed;
}
or you can make the .bg position absolute or fixed so it'll take 100% height.
The default html gets a margin so it will not stretch till the end, so add margin:0 and padding: 0, for stretching till the corners of the browser. Next the width:100vw; implies that 100% of your viewport width so as to make a responsive webdesign, similarly height:100vh; 100% of the viewport height
Add a CSS rule
body, html {
margin:0;
padding:0;
height:100vh;
width:100vw;
}
I'm building an one page scroll down type website, where each slide is a page.
In the last slide, the background image is somehow geting cuted and there's just a white space. The css used on the id of that slide:
#seven {background:url(../img/camara_view.JPG) bottom no-repeat fixed; }
Here's a print:
http://postimg.org/image/489mxfagt/
Any solutions?
You can use background-scale property:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
If you're supporting modern browsers, you can do the following.
#seven {
background-size: cover /* contain */ /* width in px/em/rem ie 50rem 20rem */
}
Alternatively, you can put your image in an img tag within a container, position the container using either fixed or absolute positioning. Next, give it a width of 100% and height of 100% or top, left, right, bottom a value of 0, while hiding the overflow. Lastly, set the img width to width: auto and height: 100% with display: block.Example here.
using css background image
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
else you can try some other way below code works fine from ie7
css code
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position:absolute;
top:25%;left:25%;
right:25%;bottom:25%;
margin:auto;
min-width:50%;
min-height:50%;}
html code
<div id="bg">
<img src="images/Body-bg.png" alt="">
</div>
Just add .bgwidth { width: 100%; }
.bgheight { height: 100%; }
this will eliminate issue
I'm trying to create a responsive, FIXED background that works on all major browsers.
Basically I'm after the typical background:cover behavior (scales with browser size) BUT, want the background to be fixed to create a parallax effect.
Is this even possible if so, how?
The CSS so far WITHOUT Fixed:
#front_header {
background: url(1.png) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#front_header .featured {
width: 100%;
max-width: 950px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
#front_header .txt {
margin: 19.5% 0 19.5%;
text-align:center;
display: block;
}
The Body HTML:
<section id="front_header">
<div class="featured">
<div class="txt">
<h2>Test</h2>
</div>
</div>
</section>
As you can see, when you resize this, the background resizes slightly. However if I add
background-attached:fixed;
The background no longer resizes, only behaves like a fixed background should.
Try this:
keep the
background-attached:fixed;
and instead of background-size: cover, try :
background-size: contain;
Also for future reference, try and add your code to : http://jsfiddle.net
it's best when you simulate the problem for everyone to see and help.