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;
}
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;
}
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
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!
I have some dynamic images as a background for some divs. Those have variable widths and heights. In front of each such a div i have a radio button. There is a way to align through css each div to be exactly at the middle referring to the radiobutton in front of it? I cannot use fixed background height since there are dynamic and the height are different. I was trying to put background-size: 100% 100%; or background-size: auto;
Doesn't work
Any help is more than welcome, thanks!!!
Try:
background-position: center center;
=====
UPDATE:
It's a lot easier working with your fiddle!
Try this:
div.VISA_logo {
background: url("http://www.globalworkandtravel.com/sites/all/modules/customshare/includes/facebook.png") no-repeat;
}
div.VISA_CARTE_BLEUE_logo{
background: url("http://www.discoverireland.ie/App_Themes/DiscoverIreland/images/discoveries/button-add-trip-small.png") no-repeat;
}
div.MasterCard_logo{
background: url("https://s3.amazonaws.com/sugarstats/s3_avatars/7287/1234222094_norm.jpg") no-repeat;
}
div.AMEX_logo{
background: url("http://www.uappointment.com/images/google-small-icon.png") no-repeat;
}
div.PAYPAL_logo{
background: url("http://i.imgur.com/EqgOS.png") no-repeat;
}
div.VISA_logo,
div.MasterCard_logo,
div.PAYPAL_logo,
div.VISA_CARTE_BLEUE_logo,
div.MasterCard_DE_FR_UK_logo,
div.AMEX_logo {
width: 105px;
margin-left: 5px;
height: 42px;
float: right;
margin-right: 30px;
background-position:0 center;
}
I have applied set background-image on one of my <div> with the following properties below:
.mydiv-left {
background: url(path to image) no-repeat center center fixed;
height:auto; // also tried with 100%
background-size:auto // also tried with "100%" and "100% 100%" as well as "cover"
}
This result is no image display, but when I set the height to this image, it cuts off the image. As image is of high resolution and I want it to fit in the smaller area of my div without removing any part/information.
Keep in mind that background image is dynamic and keep on changing for other divs within the loop.
Try this
CSS
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
If you post the entire code it is easy to find solution.
<div> without content/ height will result in 0 height. I guess that's why you can't see your image.
Give your <div> a size, and background-size should do its work.
http://jsfiddle.net/LsdDE/
.d1, .d2 {
border: 1px solid grey;
width: 200px;
height: 200px;
background: url(https://www.google.com.tw/images/srpr/logo11w.png);
}
.d1 {
background-size: auto 200px;
}
.d2 {
background-size: 200px auto;
}
Simplest suggestion would be to give min-height to your div in pixels... DEMO , keeping your markup same, below is the CSS.
CSS
.mydiv-left {
background: url(http://www.wallng.com/images/2013/08/image-explosion-colors-background-beautiful-263613.jpg) no-repeat center center fixed;
color : #FFF;
min-height:200px; /*this is the key*/
height:auto;
background-size: 100% 100%;
background-repeat: no-repeat;
}
if you give height:auto;, it would scale the div to content height.
if you want to show the div anyway, min-height is a solution
Thanks all for helping me out, I was able to get it done with the following below code:
mydiv {
background: url(images/bg.jpg) no-repeat;
height: 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Main thing was last four lines that worked for me the way I wanted.
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}