I have a website with a cover image.
The problem is when a user resizes the window, the background does not stay fixed and full height.
What I want:
A way for the background image to stay fixed and full height whilst the user resizes the window.
This is what I have so far:
#top {
width: 100%;
height: 200px;
border-bottom: 1px solid black;
background-image: url(http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg);
background-size: 100%;
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}
http://jsfiddle.net/h64vyr60/
Is this what you are looking for?
Just need to set background size as cover, and add a media query:
#top{
width: 100%;
height:200px;
border-bottom:1px solid black;
background-image: url(http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg);
background-size: contain;
background-position: top center;
background-repeat:no-repeat;
background-attachment:fixed;
}
#media screen and (max-width:900px) {
#top{ background-size: 900px auto;} //900px is the image original width
}
<div id="top"></div>
https://jsfiddle.net/hwzhsrer/
You can just keep background-size set to initial, or remove background-size property. This will retain the image height when the page is resized.
#top{
width: 100%;
height:200px;
border-bottom:1px solid black;
background-image: url(http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg);
background-size: initial;
background-position: top center;
background-repeat:no-repeat;
background-attachment:fixed;
}
<div id="top"></div>
Hope that helps you out!
Related
So, in my previous post I was asking how I can diplay a 500x500 image, with that image to only be resized towards the x axis and not y.
.image {
border: 1px solid blue;
background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: contain;
width: auto;
height: 500px;
max-width: 100%;
}
I use border to understand a bit better the borders of the image. I tested this and works fine except for the fact that when I resize it towards the x axis it's indeed resized but it gives a blank area at the bottom:
How can I fix this so no blank bottom area appears, the border to fit always the image? Ty
The width of your container is not 500px, so therefore the background image is being reduced in height to maintain its aspect ratio. If you would like to entirely fill the <div>, you can use background-size: cover, as follows:
.image {
border: 1px solid blue;
background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 500px;
max-width: 100%;
}
<div class="image"></div>
Perhaps use img tag and make this img responsive? here is my solution:
https://jsfiddle.net/7rwp5jf4/
Html:
<div>
<img src="http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg">
</div>
Css:
DIV {
border: 1px solid blue;
width: auto;
height: 500px;
max-width: 100%;
}
div img{
width:100%;
height:auto;
}
How can I get the image to shrink when the size of the window gets smaller without making the image stretched funny. I want the size of the image to auto adjust to make it look normal at all sizes.
.frontpage{
background: url('https://static.pexels.com/photos/168/apple-iphone-laptop-notebook.jpg');
background-size: 100% 100%;
min-height:1000px;
}
JSFiddle Link
Easy, use background-size: cover:
.frontpage{
background: url('https://static.pexels.com/photos/168/apple-iphone-laptop-notebook.jpg');
background-size: cover;
background-position: center center;
min-height:1000px;
}
JSFiddle
Use the value contain for background-size, it will adjust the background to be contained within the bounds of the container
div {
background-image:url(http://placekitten.com/g/256/256);
background-size:contain;
background-repeat:no-repeat;
border:1px solid lime;
}
.first {
width:50%;
height:100px;
}
.second {
width:256px;
height:60px;
}
.third {
width:200px;
height:350px;
}
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
Well, you just try following style
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
This will make the background image width 100%, and height will get auto with correct ratio.
You also can try other options like
background-size: contain;
or
background-size: cover;
Fiddle link:
https://jsfiddle.net/ildaroit/evL7tn6r/
.video-wrapper {
max-width: 640px;
margin: auto;
margin-top: 20px;
}
.video1 {
border: 0px dotted black;
height: 420px;
/*height:50vw;*/
background: url("http://learn.shayhowe.com/assets/images/triangles/triangles.svg") left -3px no-repeat, url("http://learn.shayhowe.com/assets/images/triangles/triangles.svg") right -3px no-repeat;
/* background-position: left, right;*/
background-repeat: no-repeat, no-repeat;
}
How to make the image not overlapping center div content on decreasing windows size?
Like here: learn.shayhowe.com
Now, left and right image overlap .video but need to make it fixed or something else.
Thx in advance!
hello do you mean like this?
https://jsfiddle.net/evL7tn6r/6/
just add a wrapper to your video1
.page{
width:100%; /*this is not really necessary*/
overflow:hidden;
}
and a min-width to the video
you can adjust the min-width to set the minimum space between the graphics
Why the background image not working with
DEMO
HTML
<div class="container" style="background-color: red;"></div>
CSS
.container {
width: 100%;
height: 385px;
background-image: url(http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png);
background-position: center top;
background-size: 100% auto;
background-size: cover;
border-bottom: 1px solid #3f4858;
background-repeat: repeat-x;
left: 0px;
top: 0px;
}
Apart from the already mentioned spelling error
The problem here is with the size of your container and the size of your background image. Your image has a lot of space on top and you will see nothing for the size of you container. Check if you change the background-size property to:
background-size: 100% 100%;
Demo
For the porperty background-size you can also use contain:
the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area
AnotherDemo
Your width: 100% depends on width of parent element. And its not set. Thats why. So change your CSS to this:
.container{
width:300px;
height:385px;
background-image:url(http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png);
background-position: center top;
background-size: 100% auto;
background-size:cover;
border-bottom:1px solid #3f4858;
background-repeat:repeat-x;
left:0px;
top:0px;
}
Also why you have in your HTML style="background-color:red;"? Do you want to have as background image png_grass_by_moonglowlilly-d5z1o5t.png or red color? Or you want to have in transparency of that PNG image red color?
DEMO
Try This:
.container{
width:300px;
height:385px;
background-image:url('http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png');
background-position: center top;
background-size: 100% auto;
background-size:cover;
border-bottom:1px solid #3f4858;
background-repeat:repeat-x;
left:0px;
top:0px;
}
<div class="container" style="background-color:red;">
The image is of size 1024x819px and the grass is starting from 232px from top so you need to position your background image or change your div.container size so as to fit the image within the given size.
Demo-1 with container size changed:
Demo-1
Demo-2 with image position changed with your code snippet only.:
Demo-2
just notice background-position I have changed to 0px -232px;
I am looking to fix my second full width image (the one in the middle of the page) so that is fits horizontally the same as the one above in the header image. Can somebody double check my CSS so see if it is correct. It needs to auto resize to fit the screen like the header image above. When i view it on mobile it is not fitting correctly. Thanks for taking a look.
http://www.jobspark.ca
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
border-bottom: solid 1px #ddd;
border-top: solid 1px #ddd;
margin-left: -1600px;
margin-right: -1600px;
padding-top:20px;
padding-bottom:330px;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: auto;
}
You need to add the height on to your div I think. Here's the fiddle. I just added a height to the div and now it resizes fine... Is that what you needed it to do?
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
width:100%;
background-position:center;
height:575px;
}
Updated css (still resizes)
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position: bottom center;
background-size: cover;
height:575px;
background-attachment: scroll;
background-repeat: no-repeat;
}