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>
Related
I was trying to put background image but it is not showing.
.jumbotron{
background-image: url("/src/assets/shop1.png");
background-size: cover;
}
<div class="jumbotron">
Welcome to Home Page
</div>
The background image will look at the height and width of the div. Please follow the code to see the image.
.jumbotron {
background-image: url('https://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
background-size: 100% 100%;
height: 100px;
width: 100%;
background-repeat: no-repeat;
}
Working demo
I am currently positioning a background image that is small in height but large in width to stretch all the way across the browser. I am only able to achieve this when I do background size cover, but not when I set a certain size to the image other than cover. I tried background repeat-x but that does not seem to work either.
<html>
<body>
<div class="background">
<div class=“header”></div>
//some content
</div>
<footer><footer/>
</body>
</html>
CSS
.background {
background-image: url(some image);
background-size: //tried cover and it works but not when I set it to width 100% or something like 2800px
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
Just add background-size: cover code in css will resolve the issue.
.background {
background-image: url(some image);
background-size: cover;
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
It is working with background-size:100%;
.background {
background-image: url("marakele-elephant1.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position-y: bottom;
}
html, body{
height: 100%;
}
body {
background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
div, body{
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
<div class="wrapper">
<div class="message"></div>
</div>
Not very related to this question but I hope this answer will save someone's time
For the people who are using bootstrap. Keep the image inside a container, check again if it is inside class="container", I had a typo, I wrote classs instead of class and the background image wouldn't fit.
Second, close previous divs.
Third, if you don't use container and start with just <div class='row'></div>, background image won't fit.
Working Example:
<div class="container" style="background-image: url('img'); background-size: cover;">
<div class="row">
</div>
</div>
I'm curious if the CSS unit vw (view width) will accomplish what you are trying to do with width: 100%
Instead of width: 100%, try width: 100vw
https://www.w3schools.com/cssref/css_units.asp
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 have a background image that I would like to fill the width of the (responsive) page. I.e. if the page is huge, the width of the image is also huge. However if the width shrinks down the image is cropped rather than scaled (because I want the height to stay the same, i.e. no white space anywhere).
I have most of it working, except filling the width.
Here is my jsfiddle: https://jsfiddle.net/jwdyc1rh/
HTML:
<body class=" cms-index-index cms-home">
<div class="main-container col1-layout">
<div class="main">
</div> <div>
</div>
CSS:
body.cms-home .main-container {
margin-top: -20px;
background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg);
background-repeat: no-repeat;
min-height: 1024px;
background-position: center;
width: 100%;
}
Kind of hard to see without stretching the screen huge, but you can see the white background if it's stretched, rather than the image scaling to fit.
A perfect example of this working how I want is www.prada.com but I can't seem to work out the right code.
Use background-size: cover;
jsfiddle
Apply background size like background-size: 100% 100%;
It will do the trick.
body.cms-home .main-container {
margin-top: -20px;
background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg);
background-repeat: no-repeat;
min-height: 1024px;
background-position: center;
width: 100%;
background-size: 100% 100%;
}
Updated Fiddle
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
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>