This is my first question so I'm probably gonna miss something. Please tell me if you need any additional information.
I am trying to create a sliced image overlaying another image and when you hover any of the slices it will disappear and show the underlying picture. What I've done is that I have created several divs that represents each slice and then used a fixed background position so the overlaying image looks whole.
I've made the concept work, but I'm having some trouble adjusting the positioning of the overlaying picture. Since I'm using fixed background positioning the overlaying picture doesn't work in a responsive environment, that is if I don't position the image in the top left corner. But if I remove the fixed positioning I haven't been able to create a seamless sliced picture.
Can this be solved or am I approaching this problem the wrong way entirely? Thanks for your help!
Here is a codepen of what I've done https://codepen.io/renryl/pen/MzJjpd.
body {
margin-left: 50px;
}
$itemWidth: 20px;
$foreground-image: 'https://i.warosu.org/data/biz/img/0022/15/1495964000552.jpg';
$background-image: 'https://vignette.wikia.nocookie.net/wiiu/images/5/5e/New-Super-Mario-Bros-Art-21-400x400.jpg/revision/latest?cb=20121029024830';
.background-picture {
max-width: 400px;
height: 400px;
overflow: hidden;
background: rgba(#424242,.5) url($background-image) no-repeat;
border-radius: 50%;
}
.foreground-picture {
width: $itemWidth;
height: 100%;
display: inline-block;
transition: all 1.5s ease-in-out;
background: rgba(#424242,.5) url($foreground-image) no-repeat fixed;
&:hover{
transition: all 0s linear;
opacity:0;
}
}
<html>
<body>
<div id="app">
<picture inline-template>
<div class="background-picture">
<div v-for="i in numberOfSlices" :key="i" class="foreground-picture"></div>
</div>
</picture>
</div>
</body>
</html>
Vue.component('picture', {
data() {
return {
numberOfSlices: 20
}
}
});
var vm = new Vue({
el: '#app'
});
If i understand, You need both of these properties:
background-position: center;
This will center your image to your div.
background-size: cover;
The background-size cover will fit to the content and cover it all
Related
I am trying to make the text stay in the bottom right corner, but once I change the window height or width, it goes out of the curve (shown here)
I tried positioning it with percentages, vw, vh, em and it still goes out of the curve when the screen size is changed.
Any idea on how to position this so it always stays inside that curve no matter the size of the screen?
Here is the code:
.phone-number {
position: absolute;
bottom: 20vh;
right: 5vh;
color: #472d23;
font-weight: 600;
font-size: 3vh;
}
.landing-page {
background: url("../img/bg2.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
background-position: center;
position: relative;
overflow: hidden;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.curve {
background: url("../img/Curve.png");
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 100vh;
}
<div class="row">
<div id="carasoul" class="landing-page">
<div class="curve">
<div class="container">
<h3 class="phone-number">+1 800-800-800</h3>
</div>
</div>
</div>
</div>
Try this. In HTML, add:
<div class="numBox">
<p class="num">Your number or your stuff</p>
</div>
In CSS, add:
.numBox
{position:relative;}
.num
{position:absolute; bottom:0; right:0;}
Try the following to set the text to fixed location relative to the bottom right corner:
.phone-number {
position: absolute;
bottom: 5px;
right: 5px;
color: #472d23;
font-weight: 600;
font-size: 3vh;
}
Wu. I think I my have a solution for you.
I think you will need a combination of things. Here goes...
First, I think you will need to set your position to relative.
Second, you will need to use a "transform: translate;" setting in your css, but use whatever percentages that you used before to keep the text where you wanted it. You would put those "y" and "x" percentages in the "translate" part of the css code.
Why do I think this would this work?
When you are creating a fullscreen video background for a webpage (or any kind of background for that matter), it is pretty common practice to use the "transform: translate" aspect of code to help insure that the background stays centered no matter what.
And if you think about it, what you're telling the CSS to do is to animate the item into the position you're telling it to be in, no matter the condition or size of the browser.
Using that concept, "transform: translate" should work no matter what position on the screen you want an item to have, whether it is to be centered or not. A really experienced engineer told me a few months ago that all engineering (coding included) is all about understanding CONCEPTS, because no two situations will call for the precise same answer. So the secret to learning is to learn how to adapt and apply concepts.
Sorry... tangent!
Anyway, I think that approach will work, even if I can't supply you exact code.
One more thing...
If "position: relative" doesn't work with what I told you, try "position: absolute".
I hope that helps!
So i have this image right here
"http://i.imgur.com/eh71foN.png"
My problem is that whenever i resize the window the Mass Effect image doesnt resize with it.
It becomes like this
"http://i.imgur.com/jaDV7jG.png"
I've been trying to figure this out for a while. Can anyone point me in the right direction?
#MassEffectSign {
background: url(masseffect12.png) center top no-repeat;
top: 25px; left: 750px; z-index: 2;
padding: 250px;
position: absolute;
}
My blue background
#bodyBorder {
background: url(navyblue.jpg) center top repeat-y;
padding: 1000px;
opacity: 0.7;
background-attachment: fixed; }
Use img tag instead background image in CSS.
img {width: 100%}
Use percents for the relevent values.
top: 25px; left: 45%;
This makes the amount of space between the left edge and the image relative to the window size. Play around with the value a little to center it and you should be good.
Your positioning is absolute, so it will move independently of the scale. Put that inside a relatively positioned div and then it will work.
For instance,
<div style="position:relative;">
<div id="MassEffectSign"> </div>
</div>
Hope this helps.
I have a "main-image" containing lots of small images which I "clip" into divs of fixed size by setting the background-position to some negative offsets. This works great!
Now I have a div with a size that changes during the lifetime of the web-page.
The old code had its own backgound-image with the background-size set to "contain". Something like this:
.dump {
display: inline-block;
background-image: url("/some/image.png");
background-repeat: no-repeat;
background-size: contain;
}
And that worked great too.
Now I'm trying to clip that background image from my "main-image".
E.g. My "main-image" has a size 1800px128px
The sub-image I like as background starts #1200px,10px with a size of 200px x 80px.
Is there a way to clip this rectangle and than scale to the dimensions of the containing div (which are unknown at the time of programming)
Thanks for the hint. However, I tried but can't get anything to work:
My problem is, that the div image should follow the height the containing div, so I can't tell size, or scale or zoom or whatever at the time of coding. I give an example:
<div style="width:100%; height:30%; text-align: center">
<div class="dump"></div>
</div>
Now, as I said: The image I want to appear as the background of div.dump is the 200x80px area from the main-image #origin(1200,10) AND I want that resulting image scaled to fit the hight of the container. So, I have a known translation, followed by an unknown zoom. Maybe it's just over my head.
I believe the best way to do this is using css transforms, I found this page for further reference on how to transform a background image and made this fiddle based on it.
The idea is that you will use the classes "icon" and "icon:before" to configure your sprite to fit in an element and use other classes like "smaller" and "bigger" to set the actual size of the element.
.icon
{
font-size: 2em;
text-align: center;
line-height: 3em;
border: 2px solid #666;
border-radius: 7px;
position: relative;
overflow: hidden;
}
.icon:before
{
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;
z-index: -1;
background: url(http://blogs.sitepointstatic.com/examples/tech/background-transform/background.png) 0 0 repeat;
transform: translate(-50%, -50%) scale(1.5, 1.5);
background-repeat: no-repeat;
background-size: contain;
}
.smaller{
float:left;
width: 120px;
height: 120px;
}
.bigger{
float:left;
width: 200px;
height: 200px;
}
Because css transforms support percentage, the background will be clipped and scaled correctly, according to the size defined in "smaller" and "bigger"
A member of this forum was kind enough to provide the following CSS rollover code which is "fluid" and can adjust in dimensions based on browser size. I've included the code below along with Jfiddle link:
CSS
.container {
width: 100%;
height: 300px;
background: #f1f1f1;
}
a.widgetbook {
display:block;
max-width: 369px;
max-height: 85px;
width: 100%;
height: 100%;
background: url("http://69.195.124.70/~profetz4/wp-content/themes/artificer/images/btn-contact.jpg") no-repeat left top;
margin-bottom: 6px;
background-size: 200%;
}
a.widgetbook:hover {
background-position: right top;
}
HTML
<div class="container">
<a href="#" class="widgetbook">
</a>
</div>
http://jsfiddle.net/cw6hN/
I'm looking to apply a fade-in CSS transition that will position the rollover image properly, and then fade in with an opacity of 1. I'm able to do this to a standard button (non-responsive) but haven't figured out how to apply it to the button scenario above. Any help on how to best achieve this would be most appreciated.
Thanks in advance!
D
Updated JSFiddle to how you wanted it, but using 2 separate images.
Add this to a.widgetbook
transition:all .6s;
JSFiddle
To get the 'fade in' affect you're looking for, you'll need to create two different images.
What I'm trying to achieve without using JS can be seen on jsfiddle.net/k2h5b/.
Basically I would like to display two images, both centered, one in background and one in foreground:
Background Image: Should cover the whole window without affecting the aspect ratio, which means that the image will always touch two opposite edges of the window, but the image will be cropped.
Forground Image: Should be inside the window without affecting the aspect ratio, which means the image will be always touch two opposite edges of the window, but the image will not be cropped.
It doesn't matter if it's a <div> or an <img> tag, as long as they are displaying the images.
Asume also that the image sizes are known upfront and can be used in CSS or HTML part.
So my question is: is it possible using only CSS or CSS3?
If it's not possible I will accept the answer that will be as close as possible to my goal.
Examples:
When the background image is cropped from the top and bottom:
When the background image when it's cropped from left and right:
After looking at #Kent Brewster's answer, I think I could achieve all the requirements of OP.
This doesn't have the problem of foreground image being cropped and you can also specify constant margin around the foreground image. Also div is being used instead of img tag, because we are using background images. Here is the link and here is the code:
<div id='bg'></div>
<div id='fg'></div>
#bg {
position: absolute;
height: 100%;
width: 100%;
background-image: url(http://i.imgur.com/iOvxJ.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
#fg {
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
opacity: .7;
background-image: url(http://i.imgur.com/HP9tp.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
Try this:
<html>
<style>
body {
margin: 0;
}
#bg {
position: absolute;
height: 100%;
width: 100%;
background: transparent url(bg.jpg) 50% 50% no-repeat;
background-size: cover;
}
#fg {
position: absolute;
height: 90%;
width: 90%;
top: 5%;
left: 5%;
background: transparent url(fg.jpg) 50% 50% no-repeat;
background-size: cover;
opacity: .7;
}
</style>
<body>
<div id="bg"></div>
<div id="fg"></div>
</body>
</html>
If the scaling requirement is flexible, it might work. See http://jsfiddle.net/k2h5b/5/ to see it run.
Yes, it's possible.
Basically I just made the background image the background for the <body> (doesn't have to be the body of course), and then put the image inside that with a small margin.
<body>
<img id='fg' src='http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg'></img>
</body>
css:
body {
margin: 0; padding: 0;
overflow: hidden;
background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}
#fg {
margin: 20px 20px;
opacity: 0.7;
}
obviously if the window is too big, there'd be issues. You could (I guess) use media queries to pull in different image sizes based on window size.
edit — OK, well for the image, if you do want it to crop and retain the right aspect ratio, then I think you'll have to know the image size ahead of time to do it so that it works out. Lacking that, here's another revision.
<body>
<div id='fg'> </div>
</body>
css:
body {
margin: 0; padding: 0;
overflow: hidden;
background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}
body, html { width: 100%; height: 100%; }
#fg {
margin: 2%; width: 96%; height: 96%;
opacity: 0.7;
background: url('http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg') no-repeat center center;
}
If you know the image dimensions, you could then set max-height and max-width. (I'll try that too :-)
edit again To get the background to crop in a centered way, you'd need to set the position to "center center" instead of "left top". (Or "center top" if you just want it centered horizontally.)
Vertically centering elements with CSS without cutting-edge non-standard features (flexible box layout) is hard. That may be something to do with JavaScript. I'll say that one problem with any JavaScript solution like that is that it really slows the browser down. If you must do it, I would suggest introducing a little time lag so that you don't try to recompute the layout on every resize event. Instead, set a timer for like 200 milliseconds in the future where the work will get done, and each time you do so cancel the previous timer. That way, while a person is dragging the window corner it won't burn up their CPU.
edit even more ooh ooh yes #Kent Brewster's answer with the vertical centering is good - I always forget that trick :-)
There is no way to achieve this effect using only CSS, for two main reasons:
Because you are trying to resize your image, you cannot use the background property and must instead use an <img> tag. Your image will always try to take up as much room as it can if the width and height are not set. Thus, the aspect ratio will not be maintained, or your image will be cropped.
The other caveat of resizing the image is that you will not be able to vertically-align it to the center of your page without knowing its dimensions.