Make 2 background images equal
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I have 2 background images that I need to be vertically equal between each other like in this version
image
Right now I have the styling set at as:
background-repeat: no-repeat, repeat-x, repeat-y;
background-position: 925px center;
However, the equality for the images only stays when I'm looking at on this viewport. When I exited out of the inspect tool, it messes up and resizes it.
I have tried calc() and other background-positions but I haven't been able to solve it.
Any help is appreciated.
css image image-scaling
asked Nov 15 '18 at 14:25
Marsel GrayMarsel Gray
228
add a comment |
I have 2 background images that I need to be vertically equal between each other like in this version
image
Right now I have the styling set at as:
background-repeat: no-repeat, repeat-x, repeat-y;
background-position: 925px center;
However, the equality for the images only stays when I'm looking at on this viewport. When I exited out of the inspect tool, it messes up and resizes it.
I have tried calc() and other background-positions but I haven't been able to solve it.
Any help is appreciated.
css image image-scaling
asked Nov 15 '18 at 14:25
Marsel GrayMarsel Gray
228
add a comment |
I have 2 background images that I need to be vertically equal between each other like in this version
image
Right now I have the styling set at as:
background-repeat: no-repeat, repeat-x, repeat-y;
background-position: 925px center;
However, the equality for the images only stays when I'm looking at on this viewport. When I exited out of the inspect tool, it messes up and resizes it.
I have tried calc() and other background-positions but I haven't been able to solve it.
Any help is appreciated.
css image image-scaling
asked Nov 15 '18 at 14:25
Marsel GrayMarsel Gray
228
I have 2 background images that I need to be vertically equal between each other like in this version
image
Right now I have the styling set at as:
background-repeat: no-repeat, repeat-x, repeat-y;
background-position: 925px center;
However, the equality for the images only stays when I'm looking at on this viewport. When I exited out of the inspect tool, it messes up and resizes it.
I have tried calc() and other background-positions but I haven't been able to solve it.
Any help is appreciated.
css image image-scaling
css image image-scaling
asked Nov 15 '18 at 14:25
Marsel GrayMarsel Gray
228
asked Nov 15 '18 at 14:25
Marsel GrayMarsel Gray
228
asked Nov 15 '18 at 14:25
Marsel GrayMarsel Gray
228
asked Nov 15 '18 at 14:25
Marsel GrayMarsel Gray
228
asked Nov 15 '18 at 14:25
Marsel GrayMarsel Gray
228
228
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
I think this should do the trick. The reason the first background is applied to the body is so that when the number of pixels in width are odd, there won't be a white line in the middle.
*
margin:0;
padding:0;
body
background: url(https://www.w3schools.com/w3images/fjords.jpg);
overflow-x: hidden;
#right
background: url(https://www.w3schools.com/w3css/img_lights.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
<div id="right"></div>ref.
https://css-tricks.com/multiple-backgrounds-left-half-and-right-half/
answered Nov 15 '18 at 14:49
RokoRoko
10312
add a comment |
You could also do this by having two containers, put each image in a separate container or as a background (which is better) and use flex. Much easier with less code . Check this guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 15 '18 at 15:25
Bojan KolanoBojan Kolano
14711
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%2f53321594%2fmake-2-background-images-equal%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think this should do the trick. The reason the first background is applied to the body is so that when the number of pixels in width are odd, there won't be a white line in the middle.
*
margin:0;
padding:0;
body
background: url(https://www.w3schools.com/w3images/fjords.jpg);
overflow-x: hidden;
#right
background: url(https://www.w3schools.com/w3css/img_lights.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
<div id="right"></div>ref.
https://css-tricks.com/multiple-backgrounds-left-half-and-right-half/
answered Nov 15 '18 at 14:49
RokoRoko
10312
add a comment |
I think this should do the trick. The reason the first background is applied to the body is so that when the number of pixels in width are odd, there won't be a white line in the middle.
*
margin:0;
padding:0;
body
background: url(https://www.w3schools.com/w3images/fjords.jpg);
overflow-x: hidden;
#right
background: url(https://www.w3schools.com/w3css/img_lights.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
<div id="right"></div>ref.
https://css-tricks.com/multiple-backgrounds-left-half-and-right-half/
answered Nov 15 '18 at 14:49
RokoRoko
10312
add a comment |
I think this should do the trick. The reason the first background is applied to the body is so that when the number of pixels in width are odd, there won't be a white line in the middle.
*
margin:0;
padding:0;
body
background: url(https://www.w3schools.com/w3images/fjords.jpg);
overflow-x: hidden;
#right
background: url(https://www.w3schools.com/w3css/img_lights.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
<div id="right"></div>ref.
https://css-tricks.com/multiple-backgrounds-left-half-and-right-half/
answered Nov 15 '18 at 14:49
RokoRoko
10312
I think this should do the trick. The reason the first background is applied to the body is so that when the number of pixels in width are odd, there won't be a white line in the middle.
*
margin:0;
padding:0;
body
background: url(https://www.w3schools.com/w3images/fjords.jpg);
overflow-x: hidden;
#right
background: url(https://www.w3schools.com/w3css/img_lights.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
<div id="right"></div>ref.
https://css-tricks.com/multiple-backgrounds-left-half-and-right-half/
*
margin:0;
padding:0;
body
background: url(https://www.w3schools.com/w3images/fjords.jpg);
overflow-x: hidden;
#right
background: url(https://www.w3schools.com/w3css/img_lights.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
<div id="right"></div>*
margin:0;
padding:0;
body
background: url(https://www.w3schools.com/w3images/fjords.jpg);
overflow-x: hidden;
#right
background: url(https://www.w3schools.com/w3css/img_lights.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
<div id="right"></div>answered Nov 15 '18 at 14:49
RokoRoko
10312
answered Nov 15 '18 at 14:49
RokoRoko
10312
answered Nov 15 '18 at 14:49
RokoRoko
10312
answered Nov 15 '18 at 14:49
RokoRoko
10312
10312
add a comment |
add a comment |
You could also do this by having two containers, put each image in a separate container or as a background (which is better) and use flex. Much easier with less code . Check this guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 15 '18 at 15:25
Bojan KolanoBojan Kolano
14711
add a comment |
You could also do this by having two containers, put each image in a separate container or as a background (which is better) and use flex. Much easier with less code . Check this guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 15 '18 at 15:25
Bojan KolanoBojan Kolano
14711
add a comment |
You could also do this by having two containers, put each image in a separate container or as a background (which is better) and use flex. Much easier with less code . Check this guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 15 '18 at 15:25
Bojan KolanoBojan Kolano
14711
You could also do this by having two containers, put each image in a separate container or as a background (which is better) and use flex. Much easier with less code . Check this guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
answered Nov 15 '18 at 15:25
Bojan KolanoBojan Kolano
14711
answered Nov 15 '18 at 15:25
Bojan KolanoBojan Kolano
14711
answered Nov 15 '18 at 15:25
Bojan KolanoBojan Kolano
14711
answered Nov 15 '18 at 15:25
Bojan KolanoBojan Kolano
14711
14711
add a comment |
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%2f53321594%2fmake-2-background-images-equal%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
