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%; }
Related
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.
I want to get the background to be dynamic, proportionally re-size, and fill in the whole background instead of simply covering half of it like it is now on any mobile platform.
I'm an absolute novice at web design and am going through a merchant website. I thought I had figured out my website, but I completely forgot about mobile views so it is a mess in that area. I have tried media queries, viewport things, and more to no avail, so I feel like there was something default preventing them from working.
Website: http://www.reliefinsleep.com/
Thanks so much!
background-size: cover; will achive what you are looking for. This stretches the bg image to the size of the viewport cropping the edges rather that squashing it.
#media all and (max-width: 699px) { /* max-width would be the breakpoint for when this style kicks in */
body {
background-size: cover; /* stretches to size of viewport */
background-position: center; /* center the bg image */
}
}
You can also use percentage, pixel and em values for the background-size property. See MDN
I've got an image that has 90% width, but with a max width of 640px. I want to set a specific style when the max width is reached. So, I was thinking about a style that is applied depending on the width. Here there's a similar question:
CSS targeting specific images
But I don't have a width attribute. How can I achieve this (without using js, if possible)?
To further user3127242, you can use media queries to add landmarks where the image should change. In order to effectively change the image source, you should also consider using a div with background-image set. Example:
HTML:
<div id="fancy"></div>
CSS:
#fancy {
background: transparent url(...) 0 0 no-repeat;
width: 400px
}
#media only screen and (min-width:400px) {
background-image: url(image1.jpg);
}
#media only screen and (min-width: 500px) {
background-image: url(image2.jpg);
}
Example fiddle here: http://jsfiddle.net/27UjQ/2/
The only way without js of which I can think is using mediaQueries. Doing the math I calculated the size of your image will be 640px, when the screen's resolution is 1064. Therefore you will need to add this mediaQueries code to your css, which changes the img's style when this resolution is reached
#media only screen and (min-width:768px) {
/* Your changes to the image's style */
}
Here's a link. Try resizing the window to see the changes when the certain width is reached.
It would be great if you could provide us with a working example or your code.
But try the following:
img {
width: 90%;
max-width: 400px; /* just an example */
}
I am using blogger and recently inserted this cc code in to the advanced section of the template designer to input a background image
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
}
.body-fauxcolumn-outer div {
background: none !important;
}
The problem is that when the browser window is resized the background stays the same but all the widgets/elements on the page resize along with the window.
See www.ashlylondon.blogspot.com
I need the background to resize along with the widgets so that they stay in the white area on the background image.
You are relying on background resizing so much that your layout won't work without it. That's not ideal. The typical approach to a situation like this would be:
Have a background image that covers the entire screen
Give the <div> element that contains the actual content a background-color: white property.
You can still use background-size to scale your background image to the screen size, but it no longer is necessary for the layout to work.
this woul make sure your content is always readable no matter what; it'll work where background-size won't, e.g. in older browsers and some mobile devices.
add this to your css
body{background-size:100%;}
try this
add in body class background-size:cover;
http://jsfiddle.net/pyFbF/3/
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
background-size:cover;
}
.body-fauxcolumn-outer div {
background: none !important;
}
How do set background image to fit screen size without css positioning? Im doing school work and I would like to set a background image but my professor said I cannot use positioning so is there another way around it?
Try this
html{
background:url('backgroundimage.jpg') no-repeat center center;
min-height:100%;
min-width:100%;
background-size:cover;
}
body{
min-height:100%;/*hack for some mobile browsers */
min-width:100%;
}
reference link