In a <section>, I have a background-image with a fixed position, like this:
section {
background: url("/images/bergen_background.png"), rgba(0,0,0,0.5);
background-blend-mode: color-dodge;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
What I want is to have it scroll when it has reached the end of the <section>, and I've been able to add the JS logic to add a CSS class, section.bottom, which will remove the fixed property for the background.
However, when I remove the fixed property and scroll down, the background-size: cover seem to break and the background-image seem to not fit the entire image in the viewport.
section.bottom {
/* what do I add here? */
}
What do I do to have a background-image not-scroll and then scroll while having the background-image be fixed with regard to the viewport?
First image is before scroll reached end of the element, second is after scroll has reached the end of the element
Reproduced here:
https://svelte.dev/repl/04b96435904e4625a3ddbcc28bd7054f?version=3.38.2
I think that I have fixed your problem but not sure.
I just thinking about idea which might solve the problem my idea like below :
First : remove background-size: cover; and add
background: url(<image>) center top no-repeat fixed;
background-size: auto <width size in %>; /*Beacause background-size: cover;
creates the scrolling issue.*/
Second : with the logic JS you can change background-attachment: fixed; into background-attachment: scroll;.
I think now everything is good.
Related
I have a background image in the following div, but the image gets cut off:
<div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">
Is there a way to show the background image without cutting it off?
You can achieve this with the background-size property, which is now supported by most browsers.
To scale the background image to fit inside the div:
background-size: contain;
To scale the background image to cover the whole div:
background-size: cover;
JSFiddle example or runnable snippet:
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
width: 100px;
height: 200px;
border: 1px solid;
background-size: contain;
}
<div id="imagecontainer"></div>
There also exists a filter for IE 5.5+ support, as well as vendor prefixes for some older browsers.
If what you need is the image to have the same dimensions of the div, I think this is the most elegant solution:
background-size: 100% 100%;
If not, the answer by #grc is the most appropriated one.
Source:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can use this attributes:
background-size: contain;
background-repeat: no-repeat;
and you code is then like this:
<div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">
background-position-x: center;
background-position-y: center;
you also use this:
background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;
I don't know your div-values, but let's assume you've got those.
height: auto;
max-width: 600px;
Again, those are just random numbers.
It could quite hard to make the background-image (if you would want to) with a fixed width for the div, so better use max-width. And actually it isn't complicated to fill a div with an background-image, just make sure you style the parent element the right way, so the image has a place it can go into.
Chris
try any of the following,
background-size: contain;
background-size: cover;
background-size: 100%;
.container{
background-size: 100%;
}
The background-size property specifies the size of the background images.
There are different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height).
percentage - Sets the width and height of the background image in percent of the parent element.
cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain - Resize the background image to make sure the image is fully visible
For more: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Alternative:
background-size: auto 100%;
you can also try this, set background size as cover and to get it look nicer also set background position center like so :
background-size: cover;
background-position: center ;
So I came across this today.
I have a section that is longer than the viewport, which has a background image with background-attachment: fixed;. This background is also using the background-size: cover; property. (needed for responsive purposes)
With the fixed position applied to the background, it crops off the image to fit it within the current viewport height and overflows the top of the tag.
Is there a way to make the image sit in the correct place (i.e. same position as if it wasn't fixed) and maintain the cover propery.
.hero {
background-image: url(http://lorempixel.com/output/food-q-c-1920-1920-1.jpg);
background-size: cover;
background-position: 50% 50%;
/* set the height of the hero. */
height: 125vh;
}
.fixed {
background-attachment: fixed;
}
<h4>With the fixed position</h4>
<section class="hero fixed"></section>
<h4>Without the fixed position</h4>
<section class="hero"></section>
I'm guessing as fixed elements are fixed to the viewport, the answer is no, but wasn't sure as it's a background image.
I wondered if perhaps anyone has found a workaround?
The Problem is, that the background area is fixed to 100% view port if you use fixed - You can enlarge the background area by adding background-size:
.hero {
background-image: url(http://lorempixel.com/output/food-q-c-1920-1920-1.jpg);
/*background-size: cover;*/
background-position: 50% 50%;
/* set the height of the hero. */
background-size: 125vh;
height: 125vh;
}
I have a map image which I would like to use as the background for my website. I would like it to cover the whole background (no white space, no scroll bars - most of the time, more on that later). However, there is a section of the map which I would like to never be cropped as I plan to overlay it with other information.
I have tried the following css:
html {
background: url('../images/doreyfarmfullbackgroundempty2.png') no-repeat 90% 60% local;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
}
Can be seen in this fiddle. The section I'd like to keep is the large yellowish section to the right of the image.
This works quite well for keeping the section of my background image in the frame most of the time but it still gets cut out when the window is resized to very short or very wide. In this situation I would like scroll bars to be introduced so that the whole 'focal point' can still be seen.
I know this is pretty niche but I was wondering if anyone can see a neat way of doing this?
If you know the size of you background pic, set min-witdh and min-height with that.
html{
background: url('http://s2.postimg.org/kzwt9n34p/doreyfarmfullbackgroundempty2.png') ;
min-width:1000px;
min-height:300px;
}
Updated Fiddle
Place the background image in a container, and give it a minimum width and height, with overflow set to auto. So when the size of the browser forces the container to be smaller than you'd like, scroll bars appear allowing the user to pan the map.
<div class="map"></div>
and your CSS:
div.map {
background: url('http://s2.postimg.org/kzwt9n34p/doreyfarmfullbackgroundempty2.png') no-repeat 90% 60% local;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
overflow: auto; <-- this will enable scrollbars on overflow
min-height: 400px; <-- adjust this to taste
min-width: 400px; <-- and this
}
body {
margin: 0;
padding: 0;
}
Update to your fiddle here:
http://jsfiddle.net/xkcsu5st/2/
You could always augment this with a bit of script to control the scroll position of the map, so that the portion you want visible is always in view.
Here's a jQuery library that does it with images instead of background-images:
https://github.com/jonom/jquery-focuspoint
It might not be the best answer in time but it seems to be for now. I'll post another answer if I have one for I think there might be a better way which I'm researching at the moment :)!
I have a div, .cover-section, that I want to have a full background image that is the size of the viewport. I want to use the cover css property. I have got this working for the body of the page, but if I add more content and try to scroll, the image stays as the background. I want the image to scroll along with the content. This is what I have so far:
.cover-section {
background-image: url('../images/cover.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
How would I get it to do what I want?
Remove this linebackground-attachment: fixed;
I want to give my body a background that is fixed in the middle.
So that when I shrink my window it won't start cutting the right-side and keeping the left side static. I want it to cut left and right at the same time.
I want it to be like this example: www.everythingisnew.pt
In that website you can clearly see that the background gets "eaten" by the window at the same time from both sides.
What is the css behind it?
Specify background-position: center in your body element's CSS:
body {
background: url('your/background/src.png') no-repeat fixed center
}
This may solve your problem
background-image: url(src.jpg);
background-repeat: no-repeat;
background-position: fixed center;
background-size: cover;