Sliced background image with fixed positioning
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'
);
html css sass background
asked Nov 13 '18 at 10:51
RenrylRenryl
266
add a comment |
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'
);
html css sass background
asked Nov 13 '18 at 10:51
RenrylRenryl
266
add a comment |
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'
);
html css sass background
asked Nov 13 '18 at 10:51
RenrylRenryl
266
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'
);
html css sass background
html css sass background
asked Nov 13 '18 at 10:51
RenrylRenryl
266
asked Nov 13 '18 at 10:51
RenrylRenryl
266
edited Nov 13 '18 at 12:34
Renryl
asked Nov 13 '18 at 10:51
RenrylRenryl
266
asked Nov 13 '18 at 10:51
RenrylRenryl
266
asked Nov 13 '18 at 10:51
RenrylRenryl
266
266
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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
edited Nov 13 '18 at 19:48
paddyfields
659412
answered Nov 13 '18 at 12:02
HochHoch
393
Thanks for your answer! When I set those to properties the foreground image is "zoomed" in. Is there any way to do this while keeping the size/resolution of the image?
– Renryl
Nov 13 '18 at 12:36
From MDN for background-cover: 'Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.' If you want the image to be responsive, then it's going to have to 'zoom' in to fill all available space. Otherwise you'll have a gap at the sides or top of the image
– paddyfields
Nov 13 '18 at 14:36
Thanks for the clarification @paddyfields :)
– Renryl
Nov 14 '18 at 8:37
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279376%2fsliced-background-image-with-fixed-positioning%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
edited Nov 13 '18 at 19:48
paddyfields
659412
answered Nov 13 '18 at 12:02
HochHoch
393
Thanks for your answer! When I set those to properties the foreground image is "zoomed" in. Is there any way to do this while keeping the size/resolution of the image?
– Renryl
Nov 13 '18 at 12:36
From MDN for background-cover: 'Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.' If you want the image to be responsive, then it's going to have to 'zoom' in to fill all available space. Otherwise you'll have a gap at the sides or top of the image
– paddyfields
Nov 13 '18 at 14:36
Thanks for the clarification @paddyfields :)
– Renryl
Nov 14 '18 at 8:37
add a comment |
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
edited Nov 13 '18 at 19:48
paddyfields
659412
answered Nov 13 '18 at 12:02
HochHoch
393
Thanks for your answer! When I set those to properties the foreground image is "zoomed" in. Is there any way to do this while keeping the size/resolution of the image?
– Renryl
Nov 13 '18 at 12:36
From MDN for background-cover: 'Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.' If you want the image to be responsive, then it's going to have to 'zoom' in to fill all available space. Otherwise you'll have a gap at the sides or top of the image
– paddyfields
Nov 13 '18 at 14:36
Thanks for the clarification @paddyfields :)
– Renryl
Nov 14 '18 at 8:37
add a comment |
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
edited Nov 13 '18 at 19:48
paddyfields
659412
answered Nov 13 '18 at 12:02
HochHoch
393
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
edited Nov 13 '18 at 19:48
paddyfields
659412
answered Nov 13 '18 at 12:02
HochHoch
393
edited Nov 13 '18 at 19:48
paddyfields
659412
edited Nov 13 '18 at 19:48
paddyfields
659412
edited Nov 13 '18 at 19:48
paddyfields
659412
659412
answered Nov 13 '18 at 12:02
HochHoch
393
answered Nov 13 '18 at 12:02
HochHoch
393
answered Nov 13 '18 at 12:02
HochHoch
393
393
Thanks for your answer! When I set those to properties the foreground image is "zoomed" in. Is there any way to do this while keeping the size/resolution of the image?
– Renryl
Nov 13 '18 at 12:36
From MDN for background-cover: 'Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.' If you want the image to be responsive, then it's going to have to 'zoom' in to fill all available space. Otherwise you'll have a gap at the sides or top of the image
– paddyfields
Nov 13 '18 at 14:36
Thanks for the clarification @paddyfields :)
– Renryl
Nov 14 '18 at 8:37
add a comment |
Thanks for your answer! When I set those to properties the foreground image is "zoomed" in. Is there any way to do this while keeping the size/resolution of the image?
– Renryl
Nov 13 '18 at 12:36
From MDN for background-cover: 'Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.' If you want the image to be responsive, then it's going to have to 'zoom' in to fill all available space. Otherwise you'll have a gap at the sides or top of the image
– paddyfields
Nov 13 '18 at 14:36
Thanks for the clarification @paddyfields :)
– Renryl
Nov 14 '18 at 8:37
Thanks for your answer! When I set those to properties the foreground image is "zoomed" in. Is there any way to do this while keeping the size/resolution of the image?
– Renryl
Nov 13 '18 at 12:36
Thanks for your answer! When I set those to properties the foreground image is "zoomed" in. Is there any way to do this while keeping the size/resolution of the image?
– Renryl
Nov 13 '18 at 12:36
From MDN for background-cover: 'Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.' If you want the image to be responsive, then it's going to have to 'zoom' in to fill all available space. Otherwise you'll have a gap at the sides or top of the image
– paddyfields
Nov 13 '18 at 14:36
From MDN for background-cover: 'Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.' If you want the image to be responsive, then it's going to have to 'zoom' in to fill all available space. Otherwise you'll have a gap at the sides or top of the image
– paddyfields
Nov 13 '18 at 14:36
Thanks for the clarification @paddyfields :)
– Renryl
Nov 14 '18 at 8:37
Thanks for the clarification @paddyfields :)
– Renryl
Nov 14 '18 at 8:37
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279376%2fsliced-background-image-with-fixed-positioning%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
