I have a div which crops images to 600px high, this is what the code looks like:
.post .cutoff {
height:600px;
overflow:hidden;
}
.post .cutoff img {
max-width:100%;
}
And it works fine, but if the image isn't 600px or taller, any thing underneath it will be spaced until 600px has been met. Like this:
See, there's an annoying space... How can I fix this?
Use following property to cover image to element
.post .cutoff{
background:url(image.png) center center fixed;
background-size:cover;
}
background-size:cover; will stretch image to width & height of the element. And to receive a decent effect you have to center/align image as i did
Also use much smaller image will look pixlated when you will enlarge to cover element
I guess this is because your function resizes the division and not the image.
You could use javascript to do this!
Please specify what is post and cutoff.Are these the class names of the division and image respectively?
If yes,then it should work fine.
Otherwise you could use this piece of javascript to get the job done.
var x = document.getElementById("imageid").getAttribute("height");
if (x<600 || x>600)
{
document.getElementById("imageid").setAttribute("height","600px");
}
This would check if the image height is below or above 600px before increasing the height.
Related
I can't make the header image's height bigger. I found some CSS that made the container height bigger. But every time I change the photo out, it is still the original height: 75px;.
.container {
width:100%;
height:200px;
float:left;
margin-top:2px;
}
thml
html
What am I doing wrong?
From the screenshot i did not see any image element. If you want the image to to follow have a fixed height, you can set a height to the image itself, but if you want the image to follow the container's height, then u need to give a height to the direct container of the image, at the same time give a height to the image, 100% if you want the image to follow the height of the container.
From the code you provided. your .container has a height of 200px. If the image is inside this container, and you wish to make the image exactly 200px as the .container, then you need to add .container img{height:100%} to the image.
Try this CSS rule:
header {
min-height: 50% !important;
}
There should be something below the image that is blocking your height.
Make sure to check from the inspect element
I have a div that I'd like to use a fixed background on. I'm also using background-size cover in order to get the best fit from the bg image.
The trouble is that the background image scales as if it were to cover the div's parent. Not the div itself. Is there any way to fix this?
.panel-image {
height:100vh;
width:50%;
background-size:cover;
background-attachment:fixed;
background-position:center;
background-image:my-image.jpg;
}
.parent{
height:100vh;
}
Here is an online example. The panel-image div is square, as is the source image, yet the image is still heavily cropped as if panel-image div were much wider:
http://jsbin.com/siweloxebe/edit?html,css,output
It's because you've set the height of the child div the same as the parent.
I've played around with your code here and it seems fine, or I may have misunderstood your question
I am trying to place a image on the bottom right corner of my page and have it always be there. I have managed to do this but I have a problem when making the browser window smaller (which also is a problem while looking at it in different advices with smaller screens). When I make the browser smaller the image stays in the same size, and eventually overlaps over the other items (like my menu for example). Is there anyway to make that the image automatically becomes smaller together with the browser?
The css code I have used to place the image on the bottom right corner looks like this:
display:block;
float:right;
bottom:0;
right:0;
width:340px;
The image is a png image placed inside a div in my html.
I hope someone can understand what I mean and help me with this!
You can give the image a percentage for a width instead of a pixel width. It will then resize when you resize the window. Try setting width: 20% as a starting point and see what happens.
You can try this
<html>
<style>
img{
position:absolute;
bottom:0;
right:0;
max-width: 100%;
height: auto;
width: auto;
}
</style>
<body>
<img src="slide2.jpg"/>
</body>
</html>
resizing browser also resizes image, and is always at bottom.
Using % values for the width and height of the image should work.
Don't use floating for this case, your positioning should be absolute and don't set pixel-based sizes. If you want to set its size, you can do it by percentage, however, maybe the best solution would be to have separate themes for separate screen sizes.
I am building a single page site constructed of 4 divs, one on top of the other and each one with its own fixed background image. The images are much wider than the screen as I want to site to keep its look across a large range of screen sizes, however does anyone know how to truely center a background image. So in a small monitor they would be viewing the center of the image, and in a larger monitor they would see the same place of the image, just with more around it. Just like this site has
http://www.cantilever-chippy.co.uk/
When the window is resized the background image moves accordingly.
Many Thanks.
If you check the css from your link you see the solution:
#images #bg_1 {
background-image: url(images/bg/1.jpg);
background-position: 50% 0;
}
And the div:
<div class="bg_block" id="bg_1" style="height: 1200px; width: 1055px;"></div>
By JavaScript they change the width of #bg_1 on every resize.
window.onresize = function(event) {
$("#bg_1").css("width", $(window).width());
}
This should work
#bg{
background-image:url(yourURL);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
The background-fixed property is for Firefox and Opera.
You're looking for the background-position CSS property.
http://www.w3schools.com/cssref/pr_background-position.asp
It can take an absolute offset in pixels (so if you know the size of your image and the size of the div you could calculate exactly where you want it to appear). Or, you can pass in a percentage. It can also take a negative numbers so you can offset it off the screen in any direction.
For your case, though, you probably want the simple "center" value. Something like this should work:
/* This should center the background image in the div. */
div.background_image_block {
background-position: center center;
}
I cannot seem to get my background image to stretch vertically (with CSS) and have not been able to get it.. What's the best way to do this without using a jquery plugin?
http://realestateunusual.com/
Currently have
div#whitewrap {position:fixed; top:0; left:0; width:100%; height:100%;}
Although the question is unclear, I assume you want the houses to appear at the bottom of the page?
The body does not fill the screen unless it has to. Thus, your whitewrap div only fills 100% of the body.
Either you need to set the body height to 100% too (although this is slightly hacky) or set the background of the body to the image. This will then have the background image at the bottom of the screen (despite the body not being the full height - confusing right?).
Your HTML is hard to inspect however, due (I assume) to the software you used to create it adding in more divs than I thought possible!
EDIT: after closer inspection, it looks as if you need to set the background-position attribute to force the image to the bottom. Then, you can set the background-color to be the same as the colour of the sky at the top of the image. This should create the effect you desire without having to actually stretch & distort your image.
You can do this completely using CSS: using the background-size attribute.
body {
background-image: url(http://placekitten.com/250/150);
background-size: 100%;
}
See http://jsfiddle.net/5TSVP/.
You should look into Media Queries in your CSS and store different resolution images for major platforms. The images can then resize between with browser.
Media Queries: http://www.w3.org/TR/css3-mediaqueries/
#media (min-width:800px) { background-image: url(bg-800.jpg) }
#media (min-width:1024px) { background-image: url(bg-1024.jpg) }
#media (min-width:1280px) { background-image: url(bg-1280.jpg) }
CSS for img tag to let it resize:
img { max-width:100%; }