Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I recently changed monitors and now that I'm using a 1920x1080 resolution I've noticed that background-size property is malfunctioning on one of my sites (either that or I've misunderstood how it works for all this time).
The thing is, no matter if I set it to cover nor to 100% 100%. It just will never cover the whole page height (and both html and body tags have min-height: 100vh. I applied a blue background to the body just to check it had the proper size).
The website in question can be found here.
body {
background: url("../resources/images/bg.jpg") fixed;
background-size: cover;
margin: 0;
color: $c-golden-darker;
text-shadow: #1a0e0b 0 0 3px, #1a0e0b 0 0 3px;
font-family: Verdana, Arial;
overflow-y: scroll;
min-height: 100vh;
height: auto;
}
EDIT: After a second look, the image itself is a JPEG so it makes no sense for it to have transparent pixels.
EDIT2: Re-uploading the image to the server somehow fixed the problem.
it's working fine, the problem is in your image which contain an empty space at the end of it.
as you see, I just inspect element and change your image with another and it work fine.
You can also can see the problem of your image here :
your image has grey space in the bottom...
The property background-size is working correctly.
Have a look here:
http://metaltxus.altervista.org/animelist/resources/images/bg.jpg
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I cant seem to make the background in mobile to be fixed.
I tried the following:
.customBackground{
background-image:url('planwallpaper.com/static/images/3d-balls-hd-wallpaper.jpg') !important;
background-size:cover !important;
background-repeat:no-repeat !important;
background-attachment:fixed !important;
}
Btw..i'm using a platform..called..dudaone.. its a multiscreen platform..what i want to know..is why the background-attachment:fixed !important; not working on mobile and tablets.
But it didn't help.
What am I missing?
Not exactly sure what's happening in your code, so here's a general solution:
If you've set a background on your element like:
body {
background:url('../images/img.jpg');
}
You can then use a media query to set background-attachment: fixed; on your element only on a specific screen resolution (i.e. mobile) like so:
#media only screen and (max-width:768px){
body{
background-attachment: fixed;
}
}
If you want to read more on media queries, you can check out MDN's page on it.
I hope this helps. If you could post your code it would make it easier for us to help, since we would be able to see exactly what's going on.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
The website I'm working on has a div on the right showing code examples in the hero section of the homepage. We use a similar div on one of our landing pages (https://buttercms.com/l/ruby-blog-software/) but the bottom of the div doesnt have rounded borders.
I can't figure out why the landing page div doesnt have rounded borders but the homepage div does.
It only did it at certain breakpoints and only on one of my monitors.
The <pre> only showed up on the same breakpoints the border was wrong
The solution that worked for me was
body.landing_page .code-examples .code-container .code pre {
margin: 0;
border: none;
border-radius: 5px;
text-align: left;
min-height: 320px;
}
The original border radius was 0px
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Here is the link to the page in question:
http://ollapodridawhatuneeda.com/video_viewer2.html
I want space above the video viewer screen, but so far adding margin or padding to the various containers has only resulted in pushing the entire content div down. I want to keep it blue above the video viewer, not white. thus far I have only accomplished pushing the container down while leaving a white band above it, which is not the effect I want.
Any ideas?
Barry Glick
One way to achieve your task is you can add:
padding-top: 100px;
for the <div id="content">, so your new CSS would look like:
#content {
width: 960px;
height: 1000px;
background: #9CC;
margin: 0 auto;
padding-top: 100px;
}
This will push the video container down.
There are two possible methods, depending where you want the distance (just try it):
1.) Add margin: 100px; (or whatever value) to #videoContainer (will add above the light-blue area)
2.) Or add padding-top: 100px; to #content (will add inside the light-blue area)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I am working on a webpage with an embedded javascript web app and the styling on that has messed up the padding on my web page. I would like to add padding around all the contents of the page so they are not completely pressed against the edge but nothing I seem to be doing is working. First i tried encompassing all the contents in the body with a div and adding CSS padding to that div but nothing. Then I tried adding padding to the body in the CSS file but nothing. Finally I tried *{ padding: 10, 10, 10, 10 px; } but still nothing. Any idea on how to add padding around all the contents of a webpage?
Simple-
*{
padding:5% /* or whatever */
}
Note- this is far from ideal. Better to use a full reset and amend accordingly. Eric Meyer's is fairly easy to decipher
Your syntax is wrong too, its *{padding: 10px 10px 10px 10px;}, no commas
AMEND FOR APPARENT OP USE -
body{
padding: 10px;
}
10 is an invalid value for padding. You're probably looking for px or %. Also, adding padding to * will add padding to every single element on the page, not just around the "edge" of the page.
body{
padding: 10px;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Hi been trying to get this for quite some time. Ive done it before which is why i feel pretty pathetic for having to ask. The background will not show up.
Im trying to set a background image for my footer and the top menu on my website located HERE
This is my CSS for the Footer:
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-image: url('./classy_fabric/classy_fabic.png');
border-top: 1px solid #e5e5e5;
}
And here is the CSS for the top nav:
.blog-masthead {
background-image: url('./classy_fabric/classy_fabic.png');
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
You have fabric mispelled so it can't find it.
http://sadin.me/css/classy_fabric/classy_fabric.png
I found one glitch in you code.
background-image: url('./classy_fabric/classy_fabic.png'); one (.) is missing
background-image: url('../classy_fabric/classy_fabic.png');
I think you just need to move your file into the right directory.
Request URL:http://sadin.me/css/classy_fabric/classy_fabic.png
Request Method:GET
Status Code:404 Not Found
If you're using Chrome, check out the network tab of your debug console for any 404 errors.