JSFiddle: CSS “Background” in class [duplicate]
up vote
0
down vote
favorite
This question already has an answer here:
Why does my div height 100% work only when DOCTYPE is removed?
5 answers
Percentage Height HTML 5/CSS
6 answers
https://jsfiddle.net/k0rrupt3d/4eyd8nq1/8/
<body>
<div class="a1">
<div><a class="tl1" href="homev3.html">Test1</a></div>
<div><a class="tl2" href="#me">Test2</a></div>
<div><a class="tl3" href="#prog">Test3</a></div>
</div>
I set the image as the background in CSS using the "a1" class. The image doesn't fill the div block in JS Fiddle, but the same exact code works as intended in VSCode. What am I doing wrong in Fiddle?
Attaching screenshot of the same exact code running in VSCode.
https://ibb.co/b0VNLL
html css jsfiddle
asked Nov 20 at 0:00
k0rrupted
53
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 at 0:01
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
up vote
0
down vote
favorite
This question already has an answer here:
Why does my div height 100% work only when DOCTYPE is removed?
5 answers
Percentage Height HTML 5/CSS
6 answers
https://jsfiddle.net/k0rrupt3d/4eyd8nq1/8/
<body>
<div class="a1">
<div><a class="tl1" href="homev3.html">Test1</a></div>
<div><a class="tl2" href="#me">Test2</a></div>
<div><a class="tl3" href="#prog">Test3</a></div>
</div>
I set the image as the background in CSS using the "a1" class. The image doesn't fill the div block in JS Fiddle, but the same exact code works as intended in VSCode. What am I doing wrong in Fiddle?
Attaching screenshot of the same exact code running in VSCode.
https://ibb.co/b0VNLL
html css jsfiddle
asked Nov 20 at 0:00
k0rrupted
53
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 at 0:01
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
you needheight: 100%;applied to body and html
– Temani Afif
Nov 20 at 0:01
also in your VC code it should beheadand notheaderand you need to declare the doctype of HTML5 ( this is causing the difference ) ... you are doing wrong in VC and no jsfiddle because jsfiddle is correcting your issues
– Temani Afif
Nov 20 at 0:03
That seemed to have done the trick. Aside from head/header and the doctype issue, could you explain why declaring the height for both body and html fixed the layout?
– k0rrupted
Nov 20 at 0:12
check the duplicates and you will have a deep explanation about all this.
– Temani Afif
Nov 20 at 0:13
Will do, thanks.
– k0rrupted
Nov 20 at 0:16
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
This question already has an answer here:
Why does my div height 100% work only when DOCTYPE is removed?
5 answers
Percentage Height HTML 5/CSS
6 answers
https://jsfiddle.net/k0rrupt3d/4eyd8nq1/8/
<body>
<div class="a1">
<div><a class="tl1" href="homev3.html">Test1</a></div>
<div><a class="tl2" href="#me">Test2</a></div>
<div><a class="tl3" href="#prog">Test3</a></div>
</div>
I set the image as the background in CSS using the "a1" class. The image doesn't fill the div block in JS Fiddle, but the same exact code works as intended in VSCode. What am I doing wrong in Fiddle?
Attaching screenshot of the same exact code running in VSCode.
https://ibb.co/b0VNLL
html css jsfiddle
asked Nov 20 at 0:00
k0rrupted
53
This question already has an answer here:
Why does my div height 100% work only when DOCTYPE is removed?
5 answers
Percentage Height HTML 5/CSS
6 answers
https://jsfiddle.net/k0rrupt3d/4eyd8nq1/8/
<body>
<div class="a1">
<div><a class="tl1" href="homev3.html">Test1</a></div>
<div><a class="tl2" href="#me">Test2</a></div>
<div><a class="tl3" href="#prog">Test3</a></div>
</div>
I set the image as the background in CSS using the "a1" class. The image doesn't fill the div block in JS Fiddle, but the same exact code works as intended in VSCode. What am I doing wrong in Fiddle?
Attaching screenshot of the same exact code running in VSCode.
https://ibb.co/b0VNLL
This question already has an answer here:
Why does my div height 100% work only when DOCTYPE is removed?
5 answers
Percentage Height HTML 5/CSS
6 answers
html css jsfiddle
html css jsfiddle
asked Nov 20 at 0:00
k0rrupted
53
asked Nov 20 at 0:00
k0rrupted
53
asked Nov 20 at 0:00
k0rrupted
53
asked Nov 20 at 0:00
k0rrupted
53
asked Nov 20 at 0:00
k0rrupted
53
53
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 at 0:01
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 at 0:01
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
you needheight: 100%;applied to body and html
– Temani Afif
Nov 20 at 0:01
also in your VC code it should beheadand notheaderand you need to declare the doctype of HTML5 ( this is causing the difference ) ... you are doing wrong in VC and no jsfiddle because jsfiddle is correcting your issues
– Temani Afif
Nov 20 at 0:03
That seemed to have done the trick. Aside from head/header and the doctype issue, could you explain why declaring the height for both body and html fixed the layout?
– k0rrupted
Nov 20 at 0:12
check the duplicates and you will have a deep explanation about all this.
– Temani Afif
Nov 20 at 0:13
Will do, thanks.
– k0rrupted
Nov 20 at 0:16
add a comment |
you needheight: 100%;applied to body and html
– Temani Afif
Nov 20 at 0:01
also in your VC code it should beheadand notheaderand you need to declare the doctype of HTML5 ( this is causing the difference ) ... you are doing wrong in VC and no jsfiddle because jsfiddle is correcting your issues
– Temani Afif
Nov 20 at 0:03
That seemed to have done the trick. Aside from head/header and the doctype issue, could you explain why declaring the height for both body and html fixed the layout?
– k0rrupted
Nov 20 at 0:12
check the duplicates and you will have a deep explanation about all this.
– Temani Afif
Nov 20 at 0:13
Will do, thanks.
– k0rrupted
Nov 20 at 0:16
you need
height: 100%; applied to body and html– Temani Afif
Nov 20 at 0:01
you need
height: 100%; applied to body and html– Temani Afif
Nov 20 at 0:01
also in your VC code it should be
head and not header and you need to declare the doctype of HTML5 ( this is causing the difference ) ... you are doing wrong in VC and no jsfiddle because jsfiddle is correcting your issues– Temani Afif
Nov 20 at 0:03
also in your VC code it should be
head and not header and you need to declare the doctype of HTML5 ( this is causing the difference ) ... you are doing wrong in VC and no jsfiddle because jsfiddle is correcting your issues– Temani Afif
Nov 20 at 0:03
That seemed to have done the trick. Aside from head/header and the doctype issue, could you explain why declaring the height for both body and html fixed the layout?
– k0rrupted
Nov 20 at 0:12
That seemed to have done the trick. Aside from head/header and the doctype issue, could you explain why declaring the height for both body and html fixed the layout?
– k0rrupted
Nov 20 at 0:12
check the duplicates and you will have a deep explanation about all this.
– Temani Afif
Nov 20 at 0:13
check the duplicates and you will have a deep explanation about all this.
– Temani Afif
Nov 20 at 0:13
Will do, thanks.
– k0rrupted
Nov 20 at 0:16
Will do, thanks.
– k0rrupted
Nov 20 at 0:16
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
you need
height: 100%;applied to body and html– Temani Afif
Nov 20 at 0:01
also in your VC code it should be
headand notheaderand you need to declare the doctype of HTML5 ( this is causing the difference ) ... you are doing wrong in VC and no jsfiddle because jsfiddle is correcting your issues– Temani Afif
Nov 20 at 0:03
That seemed to have done the trick. Aside from head/header and the doctype issue, could you explain why declaring the height for both body and html fixed the layout?
– k0rrupted
Nov 20 at 0:12
check the duplicates and you will have a deep explanation about all this.
– Temani Afif
Nov 20 at 0:13
Will do, thanks.
– k0rrupted
Nov 20 at 0:16