Hi Stackoverflow,
I have some questions.
1) The image behind the black circle will be a full-width responsive slider. How can I put this image behind all the elements, in a way that Internet Explorer doesn't bug everything?
I know I can use position: absolute with z-index, but since I always had problems with IE and positions, I don't know (really), a better solution.
2) The background image of the black circle is also from the slider. Each BG it's directly linked with a image. Example: this colourful image will be linked to this black circle bg. Next slider will be another image with another bg.
How can I do this? :/
Try this:
As you said, set the position and z-index to the black image and append the same to body of the html page. Then change the slider images as earlier.
I hope it will work.
put the background image as a DIV and the next DIV "contents" will have all the contents
eg:
----contents ----
</div>
CSS
#bg-image {
background: url('http://t2.gstatic.com/images?q=tbn:ANd9GcSsYV2xklhQlwOFsqPY8OrL69n2F_naug6eShy67xcKm6QRFWmqXw');
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
}
#contents {
background: none;
width: 100%;
height: 100%;
position: absolute;
}
-- Take a look here Background image swap full
-- Other option is, Make a large size image and place it on background.
-- This is with css. Check this link perfect full page background image
Since the black circle doesn't change, what I did was: putting the black circle and the background image in a same image. And I just had to "control" the position of the text. It was a dumb solution, but it solved.
Related
I have a background image that has background-size:cover; applied to it and then a series of divs overlaid which I would like to become individual clipping masks.
I've looked at the feature clip: rect(20px, 20px, 20px, 20px,); however as the divs are brought in through a CMS system, it will be inappropriate to define set sizes.
Is there a way of setting the div with a clipping mask property so that it clips the image anywhere the div is placed on the page?
I don't particularly want to use an image overlay either as this site will be responsive.
The clip-path CSS property can be applied to all HTML elements, SVG graphic elements and SVG container elements:
http://www.html5rocks.com/en/tutorials/masking/adobe/
If I understood correctly, you're simply looking for an overlay that will resize with the screen size, and the div with the background image?
In that case, if possible, why not simply append these divs INSIDE the div that needs clipping, like this. For this sample purpose I only used one div with a transparent background and a border applied to it. If you need to clip the image in a non-rectangular shape, you will need more divs (ex. for parallelogram, diamond, triangle shape, you'll need at least 2).
Also, sadly CSS doesn't allow for % borders, but I think this example is
You can also do it the other way around and place your img div inside the clipper divs; just a matter of what fits best...
body, html {
/* necessary for sizing children in % */
width: 100%;
height: 100%;
}
#tobeClipped {
width: 80%;
height: 40%;
position: relative;
background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
background-size: cover;
}
#tobeClipped>div {
position: absolute;
}
#clippers {
width: 100%;
height: 100%;
border: 20px solid grey;
border-left-width: 100px;
box-sizing: border-box;
}
<div id="tobeClipped">
<div id="clippers"></div>
</div>
Please do clarify if this was not at all what you were looking for.
So, using html, css, javascript, I am looking for a way to have it so that my page will load with the background image blurred. Then, after the whole page loads, the image slowly goes from being fully blurred to being not blurred at all. Not an instant blur to crisp, but I nice transformation.
Not sure if I would have to have a blurred picture and one thats not and just somehow switch the pictures slowly? Any tips would help.
Blurring sounds like a nice job for Canvas.
Maybe have a look at http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
You can put your canvas page-wide on your screen with something like:
canvas{
position: absolute;
top: 0px;
z-index: 0px;
}
Then draw your background-picture blurry (have a look at the hyperlink) on it, and use setInterval or something like that in order to unblur it gradually.
I managed to be able to blur the background-image using a CSS hack. Usually, I would just set the opacity property of a container, but that would effect everything in the container. What I did instead was use the :before pseudoclass to toggle only the background-image.
#myContainer {
height: 400px;
width: 400px;
position: relative;
overflow: hidden;
}
#myContainer:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.1;
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRCFyJhwDi5ud74pENDaCIuggegz89q6Odhke5IEo7vEKwjewDxsQ);
}
h1 {
color: blue;
}
http://jsfiddle.net/59zutyLd/1/
https://css-tricks.com/snippets/css/transparent-background-images/
To remove the blur, you could use the jQuery animate property for something like this
$("#myContainer:before").animate({opacity: "1.0"}, 2000)
Unfortunately, pseudoclasses are not part of the DOM, so they can't be used in jQuery.
Keep the background_div with position:relative
Create a overlay div inside that and keep it as position:absolute, opacity:0.5, full width, full height.
Apply fadeout effect on overlay div
I hope it will the expected output.
Try the demo here:
[1] https://jsfiddle.net/fnwL8ozg/3/
Correct me if I'm wrong but what you are looking for is "Blur Up" technique described here: https://css-tricks.com/the-blur-up-technique-for-loading-background-images/
TLDR:
You create very small size copy of original picture
You load that first and add Gaussian blur overlay so it doesn't seem bad
On download complete with basic JavaScript you change pic with original
Add transition to blur none and profit
I have a situation where I have fill the body with a background image which is nothing but a pattern - so I would use
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
but now I also need one more image to set on top of this which will appear the horizontal and vertical center of screen, (this image ofcourse smaller and would only occupy the center).
Its like putting 2 images in BG smaller one over the another. How could I do that?
And I have to do that in javascript/jQuery.
How about using pseudo elements.
CSS desk demo
body
{
background:url(http://placehold.it/200x100) repeat;
}
body:after
{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/400/200) center center no-repeat;
}
Using css3 you can achieve something like this (two images), since your question is tagged with HTML5, so I think you can use this probably
body {
background: url('paper.gif'), url('another.gif');
background-repeat: repeat-y, no-repeat;
}
This is an example but not sure how you want to place both images.
Either apply a z-index:{NUMBER}; that is greater than the body's z-index (default 1) if you don't mind the top of your background image being cut off (or you can just edit the image to have an empty bar at the top to account for your header).
Or, apply your background not to body, but to whatever your main content div underneath your header is.
Is there a way I can resize, crop, and center an image using html/css only? (img tag or css sprite)
For example if I have a 500x500 pixel image,
I want to resize that to a 250x250 pixel image
I want to make the actual visible image to be 100x100, but still have the scale of a 250x250 sized image.
I want the center of the image to be at a location x,y.
Is that possible with only html/css, if not, how do you propose I go about it with javascript?
Edit - 動靜能量:
For (2), say my scaled image is now 200x200, and I want my visible image to be 100x100: So I guess what I mean is I want the scale and resolution of the image to be 200x200 but I want the visible image to be 100x100 or in other words the visible image would be at coordinates x,y: 0,0; 0,100; 100,0; 100,100; of the 200x200 image. Sorry, but I'm not good at explaining this.
Update: an example at http://jsfiddle.net/LTrqq/5/
For
You can just use CSS's width and height for the <img> element
It can be done by (1), and place this image into a div, and position: absolute, with a desired top and left, and place it in another div with position: relative, and this outer div can have width: 100px, height: 100px, and overflow: hidden
same as (2), with the desired top and left value.
We need the position: relative for the outer div in (2), because we want the inner div to position relative to this outer div, rather than relative to the whole document.
For the top and left, it is like top: -50px; left: -50px as an example.
Just done this off the top off my head but it should be nearly there if not completely accurate. The -X and -Y coordinates are what get you to the crop offset. So for example if you want to crop from 20x30 you'd make them -20px and -30px.
<style>
#crop { width: 100px; height: 100px; display: block; overflow: hidden; position: relative; }
#crop img { position: absolute; left: -X; top: -Y; }
</style>
<div id="crop">
<img src="500x500.jpg" width="250" height="250">
</div>
If you want to center it though and you know the size of the image in the crop container you could use the following CSS instead:
#crop img { position: absolute; left: 50%; top: 50%; margin: -125px 0 0 -125px; }
125px is half of 250 so it should make it central.
You can definatley size the image to any dimenson then place it in a div and hide the overflow to acheive a crop look. However if you actually want to crop the image so that say someone wants to download a copy of it cropped and scaled check out: http://deepliquid.com/projects/Jcrop/demos.php
But if you can at all try PHP, http://www.binarymoon.co.uk/projects/timthumb/
is very easy to use, just put it on your server and point your img tag src to it.
example: < img src="/timthumb.php?mycat.jpg&h=250&w=250" />
In my intro page I have a really big image in height and width to fit all the resolutions (more than 4000px in width) and I set it as below:
#source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Then, I added some text over that image with these style properties:
.description {
position:absolute;
top:510px;
left:23px;
width:340px
}
And it looks properly (and as I want it to be shown) on my 15.6 inch laptop with 1366x768 resolution.
However when my roommate saw it on his high resolution monitor the description was not on the “right” position. Of course, I understand why this is happening.
My question is how can I keep dynamically the proper position of the description text in all resolutions?
Thank you very much.
Set the distance from the bottom, not from the top. Or set it in %.
EDIT: I've adapted one of my experiments into an example: http://dabblet.com/gist/2787061
The position of the description is set relative to the bottom and the left of the image container (the image is filling its entire container).
In the first case, the distances to the left and the bottom of the image container are fixed, in px.
In the second case, they are in % and change on resizing the browser window.
Basically, the rules that do the trick are
figcaption {
bottom: 5px;
left: 23px;
/* more rules here */
}
in the fist case (fixed distances, in px) and
figcaption.perc {
left: 10%;
bottom: 17%;
}
in the second case (percentage).
Also, please note that you don't need position: absolute or to set the top and the left properties for the image.
However, you do need to set position:relative on the parent of the description box.
For the image to fill the screen horizontally, you need to have margin:0; and padding:0; on the body element and width: 100%; and margin: 0; on the figure element. I've edited my example to reflect these changes http://dabblet.com/gist/2787061
For the image to fill the screen both horizontally and vertically, the easiest way is to not even use an img tag, but simply set the image as a background image for the body and set the height for both the html and the body elements to 100% - example http://dabblet.com/gist/2792929
Be careful for two reasons: one, this will really distort the image and can make it look ugly when resizing the browser window and two, if you need some content below the image you will need to give the the outer element position: absolute and set its top: 100%. Both these two aspects can be seen in the example I've linked to. You can simply remove the content below the image if you don't need it.
use position:relative; for the div that wraps the image, and position:absolute; for the text div
please set percentage
check the example- description box set in horizontal center,
first set position relative into wraper div
.description {
position:absolute;
top:510px;
left:50%;
width:340px;
margin:0 0 0 -170px
}