How to get background image to cover entire screen when in a smaller div
0
I have a <div class="container"> that covers 60% of the screen. How would i use background on class background and have it cover entire screen?
<div class="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I want this to have background across entire page
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I also want the background here
</div>
</div>
<style>
.container {
width=60%;
}
.background {
background-image: url("img.jpg");
/*???*/
}
</style>
I dont want to put everything to separate divs.
css
asked Nov 24 '18 at 21:12
MattMatt
346
add a comment |
0
I have a <div class="container"> that covers 60% of the screen. How would i use background on class background and have it cover entire screen?
<div class="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I want this to have background across entire page
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I also want the background here
</div>
</div>
<style>
.container {
width=60%;
}
.background {
background-image: url("img.jpg");
/*???*/
}
</style>
I dont want to put everything to separate divs.
css
asked Nov 24 '18 at 21:12
MattMatt
346
What I don't understand is the logic of what you're trying to achieve. If you want the background image to cover entire screen, why not set it to body element or some page container instead of putting it on.backgroundelement? The second thing which doesn't make any sense is repeating that same.backgroundelement and basically overlapping background-images... what am I getting wrong here?
– Nemanja Glumac
Nov 24 '18 at 21:25
add a comment |
0
0
0
I have a <div class="container"> that covers 60% of the screen. How would i use background on class background and have it cover entire screen?
<div class="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I want this to have background across entire page
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I also want the background here
</div>
</div>
<style>
.container {
width=60%;
}
.background {
background-image: url("img.jpg");
/*???*/
}
</style>
I dont want to put everything to separate divs.
css
asked Nov 24 '18 at 21:12
MattMatt
346
I have a <div class="container"> that covers 60% of the screen. How would i use background on class background and have it cover entire screen?
<div class="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I want this to have background across entire page
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I also want the background here
</div>
</div>
<style>
.container {
width=60%;
}
.background {
background-image: url("img.jpg");
/*???*/
}
</style>
I dont want to put everything to separate divs.
css
css
asked Nov 24 '18 at 21:12
MattMatt
346
asked Nov 24 '18 at 21:12
MattMatt
346
asked Nov 24 '18 at 21:12
MattMatt
346
asked Nov 24 '18 at 21:12
MattMatt
346
asked Nov 24 '18 at 21:12
MattMatt
346
346
What I don't understand is the logic of what you're trying to achieve. If you want the background image to cover entire screen, why not set it to body element or some page container instead of putting it on.backgroundelement? The second thing which doesn't make any sense is repeating that same.backgroundelement and basically overlapping background-images... what am I getting wrong here?
– Nemanja Glumac
Nov 24 '18 at 21:25
add a comment |
What I don't understand is the logic of what you're trying to achieve. If you want the background image to cover entire screen, why not set it to body element or some page container instead of putting it on.backgroundelement? The second thing which doesn't make any sense is repeating that same.backgroundelement and basically overlapping background-images... what am I getting wrong here?
– Nemanja Glumac
Nov 24 '18 at 21:25
What I don't understand is the logic of what you're trying to achieve. If you want the background image to cover entire screen, why not set it to body element or some page container instead of putting it on
.background element? The second thing which doesn't make any sense is repeating that same .background element and basically overlapping background-images... what am I getting wrong here?– Nemanja Glumac
Nov 24 '18 at 21:25
What I don't understand is the logic of what you're trying to achieve. If you want the background image to cover entire screen, why not set it to body element or some page container instead of putting it on
.background element? The second thing which doesn't make any sense is repeating that same .background element and basically overlapping background-images... what am I getting wrong here?– Nemanja Glumac
Nov 24 '18 at 21:25
add a comment |
1 Answer
1
active
oldest
votes
0
.container {
width:60%;
}
.background {
background-image: url("http://lorempixel.com/400/200/");
width:100vw; /* replaced with 100% */
height:50px;
}<div class="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I want this to have background across entire page
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I also want the background here
</div>
</div>answered Nov 24 '18 at 21:18
Dogukan CavusDogukan Cavus
4,3913828
"How would i use background on class background and have it cover entire screen?"
– Nemanja Glumac
Nov 24 '18 at 21:22
Sorry. Yes. Use width:100vw instead of width:100%. I have edited.
– Dogukan Cavus
Nov 24 '18 at 21:29
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
});
}
});
draft saved
draft discarded
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%2f53462417%2fhow-to-get-background-image-to-cover-entire-screen-when-in-a-smaller-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
0
.container {
width:60%;
}
.background {
background-image: url("http://lorempixel.com/400/200/");
width:100vw; /* replaced with 100% */
height:50px;
}<div class="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I want this to have background across entire page
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I also want the background here
</div>
</div>answered Nov 24 '18 at 21:18
Dogukan CavusDogukan Cavus
4,3913828
"How would i use background on class background and have it cover entire screen?"
– Nemanja Glumac
Nov 24 '18 at 21:22
Sorry. Yes. Use width:100vw instead of width:100%. I have edited.
– Dogukan Cavus
Nov 24 '18 at 21:29
add a comment |
0
.container {
width:60%;
}
.background {
background-image: url("http://lorempixel.com/400/200/");
width:100vw; /* replaced with 100% */
height:50px;
}<div class="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I want this to have background across entire page
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I also want the background here
</div>
</div>answered Nov 24 '18 at 21:18
Dogukan CavusDogukan Cavus
4,3913828
"How would i use background on class background and have it cover entire screen?"
– Nemanja Glumac
Nov 24 '18 at 21:22
Sorry. Yes. Use width:100vw instead of width:100%. I have edited.
– Dogukan Cavus
Nov 24 '18 at 21:29
add a comment |
0
0
0
.container {
width:60%;
}
.background {
background-image: url("http://lorempixel.com/400/200/");
width:100vw; /* replaced with 100% */
height:50px;
}<div class="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I want this to have background across entire page
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I also want the background here
</div>
</div>answered Nov 24 '18 at 21:18
Dogukan CavusDogukan Cavus
4,3913828
.container {
width:60%;
}
.background {
background-image: url("http://lorempixel.com/400/200/");
width:100vw; /* replaced with 100% */
height:50px;
}<div class="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I want this to have background across entire page
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I also want the background here
</div>
</div>.container {
width:60%;
}
.background {
background-image: url("http://lorempixel.com/400/200/");
width:100vw; /* replaced with 100% */
height:50px;
}<div class="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I want this to have background across entire page
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I also want the background here
</div>
</div>.container {
width:60%;
}
.background {
background-image: url("http://lorempixel.com/400/200/");
width:100vw; /* replaced with 100% */
height:50px;
}<div class="container">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I want this to have background across entire page
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="background">
I also want the background here
</div>
</div>answered Nov 24 '18 at 21:18
Dogukan CavusDogukan Cavus
4,3913828
edited Nov 24 '18 at 21:30
answered Nov 24 '18 at 21:18
Dogukan CavusDogukan Cavus
4,3913828
answered Nov 24 '18 at 21:18
Dogukan CavusDogukan Cavus
4,3913828
answered Nov 24 '18 at 21:18
Dogukan CavusDogukan Cavus
4,3913828
4,3913828
"How would i use background on class background and have it cover entire screen?"
– Nemanja Glumac
Nov 24 '18 at 21:22
Sorry. Yes. Use width:100vw instead of width:100%. I have edited.
– Dogukan Cavus
Nov 24 '18 at 21:29
add a comment |
"How would i use background on class background and have it cover entire screen?"
– Nemanja Glumac
Nov 24 '18 at 21:22
Sorry. Yes. Use width:100vw instead of width:100%. I have edited.
– Dogukan Cavus
Nov 24 '18 at 21:29
"How would i use background on class background and have it cover entire screen?"
– Nemanja Glumac
Nov 24 '18 at 21:22
"How would i use background on class background and have it cover entire screen?"
– Nemanja Glumac
Nov 24 '18 at 21:22
Sorry. Yes. Use width:100vw instead of width:100%. I have edited.
– Dogukan Cavus
Nov 24 '18 at 21:29
Sorry. Yes. Use width:100vw instead of width:100%. I have edited.
– Dogukan Cavus
Nov 24 '18 at 21:29
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53462417%2fhow-to-get-background-image-to-cover-entire-screen-when-in-a-smaller-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
What I don't understand is the logic of what you're trying to achieve. If you want the background image to cover entire screen, why not set it to body element or some page container instead of putting it on
.backgroundelement? The second thing which doesn't make any sense is repeating that same.backgroundelement and basically overlapping background-images... what am I getting wrong here?– Nemanja Glumac
Nov 24 '18 at 21:25