I have some toggling journal entries and everything works okay except my background picture zooms in or out depending on which entry I am on. It seems that it zooms in more on the longer entries and zooms out on the shorter ones. The background is under the body tag in my CSS.
Here's my background that's having problems.
body {
background-image: url("http://housedivided.dickinson.edu/grandreview/wp-content/uploads/2010/02/HD_4USCinfantryDetail.preview.jpg");
background-size: cover;
}
Here's my full code: http://jsfiddle.net/michaelpri/urz1sLa8/2/
Any help is greatly appreciated.
Try using contain instead of cover.
When you click, the page height changes, and the background has to cover it all, so it zooms in.
It's just how the background type acts.
Try to use background-size: 100% 100%;, it will stretch the background to the screen size
It zooms because the body size changes when you display these paragraphs under the menus. If you make paragraphs the same size then it will probably stop zooming. Or if you make them independent on the body. Perhaps position: absolute will help.
Related
hello i want to add background on my site but everytimes i do it wont fit in my website
i tried
background-size:auto;
i also tried cover it even make image worse
background-size:cover;
i tried background-size:contain; too ,good then cover but not worth it there is still lots of space
am i the only one finding this tought or does any other have same problem ?
i also tried<body background="img_url" > it doesn't help
any help will be highly appreciated
If you set the of the image to 100% and height to auto (I believe) it will keep the proportions of the image and cover 100% of the width of the parent element.
When the webpage is on the big screen everything is perfect. All 3 blocks of text are inline and the white footer comes right after the background picture.
But when I resize the window webpage automatically adds space after the picture.
Not sure what I should do: have my picture repeated? But that won't look good. Leave it as it is? Not sure what to do? What is a good solution for this?
If you have a background image, you can set the background-size to cover to ensure that it always covers the whole element.
See example here: https://jsfiddle.net/ut04htu0/
If the background is an image(tag), through jquery set the height to window height in resize function.(jquery).
$(window).resize(function(){
$(".img").height($(window).height());
});
Here img is the class used for image tag.
Hopefully this solves your problem
I am going to explain my question with a series of images.
A div container will have the following background image:
On top of the image, there will be tile like divs:
My goal is to make the background image visible to only the tiles, and the rest hidden:
Any help is greatly appreciated, thank you!
Use the background-attachment attribute like in the following fiddle:
http://jsfiddle.net/1ovd3cnk/1/
each image block gets the following:
background-image: url(http://i.stack.imgur.com/fOV15.png);
background-attachment: fixed;
edit: was setting margin on row instead of conatiner
Sorry reply like this, I don't have reputation enough to add comment in other comments, but making some adds to the earlier answer:
The image shifted could be fixed using:
background-size: cover;
But remember that cover property isn't supported in old browsers.
http://caniuse.com/#search=background-size
So if you want cross old browser compatibility I recommend you to try javascript and do some maths using the width and height from your elements to adjust de background image position.
I am so confused about background image in body element.
What is the best way for setting a background image for the body element in xhtml (for different monitors and resolutions)?
I mean, when you design a background (for example 1024*768) and put it in the body element with background rule, so we have some problems in different resolution or on another monitor (so wider than designed).
How can I solve this issue without changing my picture with Photoshop?
Shall we do something with JavaScript or jQuery?
I think you want to resize your background so it stretches and and always shows fullscreen.
If that is the case, you can use supersize: http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
Hope this helps you
The most common practice is to design a larger image, considering that the most relevant area is the 1024 wide center area, and the rest is just to fill the page when the user is using larger resolutions.
As Marcel Korpel wrote, use the background-position property in css to apply align center.
It sounds like you need to not only use css to place the background-image, but also then to size the containing div to match your expectations.
body {
background: url(path/to/image) no-repeat center center;
width: 1024px;
height: 768px;
}
Up to version 3.1 in css you can use the calc function. With this you could calculate the "correct" filename of the background image fitting the individual monitor size and resolution.
I have a Google Map on one web page where I want to disable both scrolling and zooming. I accomplish this by having an empty DIV element with absolute positioning cover the map area.
Firefox/Chrome work fine, but IE6 doesn't really care about this DIV. For some reason, it just lets me drag the map. I set the DIVs background color to green, and verified that the DIV was indeed being displayed. Weird thing is, when the DIV has a visible color, it works. It blocks all events from being transferred to the map. But when the color is transparent, it doesn't work.
Any ideas why IE6 does so? I've googled a lot and all I come up with are z-index bugs, which this probably is not, since the DIV works fine with a solid background color.
This is a bug in IE6/7, try using a fully transparent background image, it should work.
Try it with a background-color and visibility: hidden;
If that doesn't work, try one of the hasLayout tricks on this page: http://reference.sitepoint.com/css/haslayout