Fitting a background image to a div
I'm using the following css to make a div always full size on screen,
.container{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
background: url("../assets/shutterstock_585038551.jpg");
/*border: 1px solid black;*/
}
However only and part of the background image shows up, How do I fit the background image without changing it's aspect ratio.
css
asked Dec 28 '18 at 19:30
Melissa StewartMelissa Stewart
809626
add a comment |
I'm using the following css to make a div always full size on screen,
.container{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
background: url("../assets/shutterstock_585038551.jpg");
/*border: 1px solid black;*/
}
However only and part of the background image shows up, How do I fit the background image without changing it's aspect ratio.
css
asked Dec 28 '18 at 19:30
Melissa StewartMelissa Stewart
809626
add a comment |
I'm using the following css to make a div always full size on screen,
.container{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
background: url("../assets/shutterstock_585038551.jpg");
/*border: 1px solid black;*/
}
However only and part of the background image shows up, How do I fit the background image without changing it's aspect ratio.
css
asked Dec 28 '18 at 19:30
Melissa StewartMelissa Stewart
809626
I'm using the following css to make a div always full size on screen,
.container{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
background: url("../assets/shutterstock_585038551.jpg");
/*border: 1px solid black;*/
}
However only and part of the background image shows up, How do I fit the background image without changing it's aspect ratio.
css
css
asked Dec 28 '18 at 19:30
Melissa StewartMelissa Stewart
809626
asked Dec 28 '18 at 19:30
Melissa StewartMelissa Stewart
809626
asked Dec 28 '18 at 19:30
Melissa StewartMelissa Stewart
809626
asked Dec 28 '18 at 19:30
Melissa StewartMelissa Stewart
809626
asked Dec 28 '18 at 19:30
Melissa StewartMelissa Stewart
809626
809626
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Add the following to your CSS.
background-size: cover;
background-repeat:no-repeat;
This assumes that your .container div is full width and height.
If it isn't, also add the following:
width: 100vw;
height:100vh;
Some information on background size.
https://www.w3schools.com/cssref/css3_pr_background-size.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Some information on vh and vw
https://css-tricks.com/fun-viewport-units/
answered Dec 28 '18 at 19:31
Ashley BrownAshley Brown
3,04662043
keep only the MDN link, please remove the w3school one
– Temani Afif
Dec 28 '18 at 19:33
@TemaniAfif Whilst for JS I wouldn't post W3, but for basic CSS, W3 isn't incorrect so I think its ok to stay.
– Ashley Brown
Dec 28 '18 at 19:34
w3 isn't correct for this particular case, but if you tell someone to go there for background-size he will for sure use it for other properties and other things (JS also) since he will find them there. So you aren't simply linking to one page but to the whole site.
– Temani Afif
Dec 29 '18 at 0:31
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%2f53963448%2ffitting-a-background-image-to-a-div%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
Add the following to your CSS.
background-size: cover;
background-repeat:no-repeat;
This assumes that your .container div is full width and height.
If it isn't, also add the following:
width: 100vw;
height:100vh;
Some information on background size.
https://www.w3schools.com/cssref/css3_pr_background-size.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Some information on vh and vw
https://css-tricks.com/fun-viewport-units/
answered Dec 28 '18 at 19:31
Ashley BrownAshley Brown
3,04662043
keep only the MDN link, please remove the w3school one
– Temani Afif
Dec 28 '18 at 19:33
@TemaniAfif Whilst for JS I wouldn't post W3, but for basic CSS, W3 isn't incorrect so I think its ok to stay.
– Ashley Brown
Dec 28 '18 at 19:34
w3 isn't correct for this particular case, but if you tell someone to go there for background-size he will for sure use it for other properties and other things (JS also) since he will find them there. So you aren't simply linking to one page but to the whole site.
– Temani Afif
Dec 29 '18 at 0:31
add a comment |
Add the following to your CSS.
background-size: cover;
background-repeat:no-repeat;
This assumes that your .container div is full width and height.
If it isn't, also add the following:
width: 100vw;
height:100vh;
Some information on background size.
https://www.w3schools.com/cssref/css3_pr_background-size.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Some information on vh and vw
https://css-tricks.com/fun-viewport-units/
answered Dec 28 '18 at 19:31
Ashley BrownAshley Brown
3,04662043
keep only the MDN link, please remove the w3school one
– Temani Afif
Dec 28 '18 at 19:33
@TemaniAfif Whilst for JS I wouldn't post W3, but for basic CSS, W3 isn't incorrect so I think its ok to stay.
– Ashley Brown
Dec 28 '18 at 19:34
w3 isn't correct for this particular case, but if you tell someone to go there for background-size he will for sure use it for other properties and other things (JS also) since he will find them there. So you aren't simply linking to one page but to the whole site.
– Temani Afif
Dec 29 '18 at 0:31
add a comment |
Add the following to your CSS.
background-size: cover;
background-repeat:no-repeat;
This assumes that your .container div is full width and height.
If it isn't, also add the following:
width: 100vw;
height:100vh;
Some information on background size.
https://www.w3schools.com/cssref/css3_pr_background-size.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Some information on vh and vw
https://css-tricks.com/fun-viewport-units/
answered Dec 28 '18 at 19:31
Ashley BrownAshley Brown
3,04662043
Add the following to your CSS.
background-size: cover;
background-repeat:no-repeat;
This assumes that your .container div is full width and height.
If it isn't, also add the following:
width: 100vw;
height:100vh;
Some information on background size.
https://www.w3schools.com/cssref/css3_pr_background-size.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Some information on vh and vw
https://css-tricks.com/fun-viewport-units/
answered Dec 28 '18 at 19:31
Ashley BrownAshley Brown
3,04662043
edited Dec 28 '18 at 19:34
answered Dec 28 '18 at 19:31
Ashley BrownAshley Brown
3,04662043
answered Dec 28 '18 at 19:31
Ashley BrownAshley Brown
3,04662043
answered Dec 28 '18 at 19:31
Ashley BrownAshley Brown
3,04662043
3,04662043
keep only the MDN link, please remove the w3school one
– Temani Afif
Dec 28 '18 at 19:33
@TemaniAfif Whilst for JS I wouldn't post W3, but for basic CSS, W3 isn't incorrect so I think its ok to stay.
– Ashley Brown
Dec 28 '18 at 19:34
w3 isn't correct for this particular case, but if you tell someone to go there for background-size he will for sure use it for other properties and other things (JS also) since he will find them there. So you aren't simply linking to one page but to the whole site.
– Temani Afif
Dec 29 '18 at 0:31
add a comment |
keep only the MDN link, please remove the w3school one
– Temani Afif
Dec 28 '18 at 19:33
@TemaniAfif Whilst for JS I wouldn't post W3, but for basic CSS, W3 isn't incorrect so I think its ok to stay.
– Ashley Brown
Dec 28 '18 at 19:34
w3 isn't correct for this particular case, but if you tell someone to go there for background-size he will for sure use it for other properties and other things (JS also) since he will find them there. So you aren't simply linking to one page but to the whole site.
– Temani Afif
Dec 29 '18 at 0:31
keep only the MDN link, please remove the w3school one
– Temani Afif
Dec 28 '18 at 19:33
keep only the MDN link, please remove the w3school one
– Temani Afif
Dec 28 '18 at 19:33
@TemaniAfif Whilst for JS I wouldn't post W3, but for basic CSS, W3 isn't incorrect so I think its ok to stay.
– Ashley Brown
Dec 28 '18 at 19:34
@TemaniAfif Whilst for JS I wouldn't post W3, but for basic CSS, W3 isn't incorrect so I think its ok to stay.
– Ashley Brown
Dec 28 '18 at 19:34
w3 isn't correct for this particular case, but if you tell someone to go there for background-size he will for sure use it for other properties and other things (JS also) since he will find them there. So you aren't simply linking to one page but to the whole site.
– Temani Afif
Dec 29 '18 at 0:31
w3 isn't correct for this particular case, but if you tell someone to go there for background-size he will for sure use it for other properties and other things (JS also) since he will find them there. So you aren't simply linking to one page but to the whole site.
– Temani Afif
Dec 29 '18 at 0:31
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%2f53963448%2ffitting-a-background-image-to-a-div%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
