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.
Related
I wanted to ask if it's possible to create 'transition' between two images like this:
using css/javascript?
The thing on top is a div with it's content and background image (sand/water) and i have some other div on bottom (also with some content and background-image) that needs to be split using that 'wave' (which is .png file).
Things i tried to do was using 'wave' as a border-image, which obviously didn't work. I found out that i probably have to use tools like http://bennettfeely.com/clippy/ to create some shapes for both top and bottom divs, but it's going to take a lot of time and may not be responsive.
Thanks in advance.
Yes, this is possible. You simply need to use multiple background stacking.
e.g.
background: url('images/wave.png') no-repeat center, url('images/beach.jpg') no-repeat center center/cover;
Where the wave png file must have its semi-transparency so it can show the beach below it.
EDIT: The aim of OP's question is to clip the image so that it can take only the wave's area. That is achievable trough the use of clip-path. More information about this can be found at CSS Tricks.
When using the CSS3 Background-size contain and background center in a div how can I differentiate in JavaScript whether the div or the actual image was clicked?
Please see the question in jsfiddle
EDIT
As indicated in the comment section, please notice that I'm sticking to this approach because the CSS3 styling of the div makes my life so easy because it properly aligns and centers the image in the div. Nevertheless, any other code that achieves the same result is welcome.
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.
Ok so I've done some looking around and couldn't find a good enough answer to this question.
Basically what I'm trying to do is minimize my websites header when a button is clicked.
Heres the CSS: http://emstectest.site44.com/style.css
I've been playing around trying to get this to work but here's the problem, I'm trying to make the background image, which is a dark blue divider colour which seperates the header and body move up when the expand link is clicked (using :target on the #header style).
But I've tried something like:
#header:target { background-position: center -300px; }
but the only thing that actually moves the background image is when I do:
body { background: url (PATH) repeat-x center -300px; }
Any help on this would be greatly appreciated. I'm holding back on using Javascript on this due to my lack of knowledge in the area; that and the fact that I want load times to be the main priority.
Another question as well as this would be: is there also a way to animate this process using -webkit- or would I have to use Javascripting again?
Thanks in advance.
- James
From the w3schools.com
Definition and Usage
URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element.
The :target selector can be used to style the current active target element.
Look at an example here
Your image has a fixed width of 440px so if you are trying to reduce the height if it you'll need to adjust it's proportions.
I have some divs with just a width, height, and border. I am using:
$(".the_divs").bind("mousemove",function(ms){
do_stuff(this);
});
My divs do not have any background css set (so you can see what is behind them). However, ie6 only fires the mousemove event when the mouse is over the border of the div. So, if you quickly move the mouse into the div (past the border), it never gets fired.
If I set the background to a color this problem is fixed.
I tried the following with no luck:
background: none transparent;
I think I could put another div inside and set the width to 100% or something, but I'm looking for the easiest solution as this is part of a bigger project.
Thanks
I think I've found a hack/fix. On my ie6 only css sheet, I set the background of these divs to a transparent gif. It seems to work.
You can avoid having a transparent GIF background by simply using an invalid image URL, for example:
background-image: url(#);
this sounds like a css issue with ie 6. I would recommend trying
display:block
also, setting the width and height of the div is probably a good idea too. here's a great resource to understanding and fixing a lot of the weird shit that ie6 does:
http://satzansatz.de/cssd/onhavinglayout.html