I'm trying to have a background image to cover the whole screen. This is my css (sass):
.html {
height: 100%;
}
.body {
height: 100%;
font-family: $font-sans-serif;
background: $white;
font-size: 16px;
line-height: 1.6;
color: darken(#ccc, 8%);
}
.masterhead {
position: relative;
width: 100%;
height: 100%;
min-height: 35rem;
padding: 15rem 0;
background: url(../images/bg_3.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
}
But the background does not have to total screen size. When I set ´position´ to ´fixed` it works but then I cant scroll to see the elements below it anymore.
What am I doing wrong?
You could just add it to the body.
For me it looks like you misstyped body with .body and html with .html.
. are definig styles for classes in css.
https://www.w3schools.com/cssref/sel_class.asp
html {
height: 100%
}
body{
height: 100%;
font-family: $font-sans-serif;
font-size: 16px;
line-height: 1.6;
color: darken(#ccc, 8%);
width: 100%;
height: 100%;
min-height: 35rem;
background-color: white;
background-image: url('http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png');
background-repeat: no-repeat;
background-size: cover;
}
While styling you shouldn't use '.' for default html tags.
Only classes should be having (a full stop) '.' before their names.
you should probably use
body{height:100%;}
and not this unless you have a class name 'body'
.body{height:100%;}
Related
Do you maybe know how (and if) I can add an opacity for the background image but only to PART of it?
The effect should be like this one: https://i.stack.imgur.com/HYvaU.png.
I have only added the image as a background but I cannot find any solution for this oppacity.
My HTML:
<header>
<img src="images/logo.svg" />
<h1>A history of everything you copy</h1>
<p>
Clipboard allows you to track and organize everything you copy.
Instantly access your clipboard on all your devices.
</p>
</header>
And CSS:
body {
font-family: "Bai Jamjuree", sans-serif;
text-align: center;
}
#media (min-width: 1200px) {
header {
width: 100%;
background-image: url(images/bg-header-desktop.png);
background-size: 100%;
background-repeat: no-repeat;
padding-top: 50px 150px;
}
}
h1 {
color: hsl(210, 10%, 33%);
font-size: 35px;
margin-bottom: 15px;
}
header > p {
color: hsl(201, 11%, 66%);
font-size: 18px;
}
Thank you in advance!
I have tried to use mask-image but it didn't work:
#media (min-width: 1200px) {
header {
width: 100%;
background-image: url(images/bg-header-desktop.png);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1), transparent 74%);
background-size: 100%;
background-repeat: no-repeat;
padding-top: 50px 150px;
}
}
Do you have maybe any idea if I can give an opacity only for the bottom part of this background image using CSS?
With more than 1 background, you can put image in 1 and opacity on the other.
You can change 2nd background color as you want. It's opacity value is given by the RGBA background color (here 0.75 in the snippet).
body {
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
width: 100vw;
height: 50vh;
top: 50%;
transform: translateY(-50%);
font-size: 10em;
font-weight: bold;
font-family: sans-serif;
background: url("https://picsum.photos/id/22/1280/600");
}
.wrapper1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: inset(50% 0 0 0);
background-color: rgba(255, 255, 255, 0.75);
display: flex;
justify-content: center;
align-items: center;
}
.wrapper2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
<div class="wrapper">
<div class="wrapper1"></div>
<div class="wrapper2">Hello World!</div>
</div>
Look at the snipper in full scree, for this demo I put width 100vw, so in small result is "strange"
section {
position: relative;
width: 100%;
height: auto;
min-height: 500px;
padding: 40px 0;
color: #333;
font-size: 14px;
background-image: url("a.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-origin: content-box;
}
My css code but background starts at begining of website not under header? how can i solve problem
summary of problem
I'm using the background-image prop to get an image in the bg and a text on the foreground:
fiddle:
https://jsfiddle.net/zvy0j3r1/5/
however I dont see any image getting displayed. i'm not sure what I'm I missing here
CSS:
.main {
padding: 40px 70px;
display: inline-block;
width: 100%; //customizable user controlled width (not necessarily be 100% all time)
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
Just set the .main as relative and .icons as absolute.
.main {
padding: 40px 70px;
display: inline-block;
width: 100%;
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
position: relative;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
<div class="main">
<div class="icon"></div>
<div class="text">No Data available</div>
</div>
The background image is not showing because the element doesn't have any height. You might think that using height: 100% to the element, would make it take up the same height of it's parent, but it doesn't work like that.
When a child element has height: 100%, it will only take up 100% of it's parent if the parent has an explicit height set, like with pixels, ems, vm, etc.
I have a page where I want a full-screen background image. This works fine when the the body fits within the viewport, I have html { height: 100%; } and body { min-height: 100%; padding-top: 70px; ... background-size: cover; } (the top padding is for a page header). The issue arises when the page becomes larger than the viewport. The body stretches to the correct height, however the background attachment never grows larger than the size of the viewport. Here is a sample fiddle [https://jsfiddle.net/xdsgek6t/]. In the live version there is also an image overlay, but in the fiddle you can easily see the line where the radial gradient ends, even though I've told it to cover the body, which in this fiddle is 3000px tall due to a child element.
html { height: 100%; box-sizing: border-box; }
body {
overflow-y: scroll;
padding-bottom: 30px;
padding-top: 70px;
background-color: #363636;
min-height: 100%;
background-color: #1976D2;
background-image: radial-gradient( circle at top right, #64B5F6 0%, #1976D2 90% );
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right 70px;
background-size: cover;
margin: 0;
box-sizing: border-box;
}
div.something { height: 3000px; width: 10px; }
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }
<body>
<header></header>
<div class="something"></div>
</body>
This ends up looking really strange when the page grows a tiny bit larger, and is really evident on mobile.
Remove height: 100%; from html and it will extend. And if you need min-height: 100% on body, you can use min-height: 100vh instead, and that will not rely on height: 100% on html
html { box-sizing: border-box; }
body {
overflow-y: scroll;
padding-bottom: 30px;
padding-top: 70px;
background-color: #363636;
min-height: 100vh;
background-color: #1976D2;
background-image: radial-gradient( circle at top right, #64B5F6 0%, #1976D2 90% );
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right 70px;
background-size: cover;
margin: 0;
box-sizing: border-box;
}
div.something { height: 3000px; width: 10px; }
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }
<header></header>
<div class="something"></div>
Hi,
like i said it in the title background-image:none; is not working since with css3 background-image:url('...'); return a new layer each time the file is new. i'm trying to remove image as my media query change the background size.So i was wondering what was the workaround that. Can any one help?
#splashHeader div.headerSplash{
height: 254.5px;
width: 100% ;
display: block;
background: none ;
background-image: url("/static/woman350.jpg");
background-position: center;
background-size: auto 254.5px;
background-repeat: no-repeat;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media all and (min-width: 640px) {
#splashHeader {
background-color: initial;
padding: 0;
position: relative;
background: none ;
background-size: 350px;
background-image: url('/static/woman500px.jpg');
background-repeat: no-repeat;
background-position: right top;
background-size: auto 350px;
}
}
#media all and (min-width: 768px) {
#splashHeader{
background-color: initial;
padding: 0;
position: relative;
background-size: 350px;
background: none;
background-image: url('/static/woman600px.jpg') ;
background-repeat: no-repeat;
background-position: right top;
background-size: auto 350px;
}
}
#media all and (min-width: 960px) {
#splashHeader .innerSection{
height: 500px;
background: none;
background-image: url('/static/woman_maximumSize.jpg');
background-color: initial;
padding: 0;
position: relative;
background-size: auto 500px;
background-repeat: no-repeat;
background-position: 70px 0px;
}
}
the imge that is stiking is the one with the one with background-position: right top;
It works just fine out of the box, your error must be somewhere that you haven't shown us.
div {
background-image: url('http://jsfiddle.net/img/logo.png');
background-color: black;
width: 125px;
height: 23px;
margin-bottom: 10px;
}
div + div {
background-image: none;
}
<div></div>
<div></div>
Do not use background: none in your CSS.
The reason is that, background: none makes all the background properties as none.
May be because of this your other background properties are failing to work.
Just remove the background: none CSS from everywhere and try to run the code.