I've used every trick in the poorly-documented book (bad joke pun intended) and there is still a white border around my background image. I am using Bootstrap but I've slapped important tags everywhere it counts, so I doubt that is what is causing the issue. If the issue can be resolved using Bootstrap 5, that would be great. I want to minimize the amount of CSS code I use in this project.
html, body {
background-image: url("./background.gif");
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
background-color: black;
margin: 0!important;
padding: 0!important;
background-size: 100% 100%;
}
Screenshot of webpage
Just remove the border classname on the first div child of body. This adds a 1px solid border by default.
It's working even without your margin and padding set to 0!important in body since you have a _reboot css that already resets the body to margin 0.
Related
I'm currently using React and I'm having issues getting a div to equal 100% of the height of the page. Originally, I had an issue with there always being about 24px of empty space above the body. I couldn't fit it no matter what. I eventually used this on my app.css (a reset)
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
It fixed the issue, but still, a measurement of 100% or 100vh doesn't actually equal 100% of the total view. Here's a screenshot of the page:
https://gyazo.com/3407b6bd0032f402f3bb97acdb725e40
The blue div is a div that fills 100vh. Yet, it doesn't fully fill the page. I tried 100% as well.
Blue div:
.loginWrapper {
margin-left: 260px;
height: 100vh;
background-color: #29B6F6;
}
I noticed that the html had this styling on it, yet even when removed no changes were noticeable:
html {
box-sizing: border-box;
}
If someone could please explain this phenomenon, I would be very grateful. If you need any extra information, just let me know. Thanks!
You will have to reset the basics margin and padding if applied from html and other top level tags.
body, html {margin: 0;padding: 0;}
Or just use something like reset.css
http://meyerweb.com/eric/tools/css/reset/
This has got to be the most resilient footer i've ever seen in my life. Please observe subject A:
URL: https://xavier-jackson-ovac.squarespace.com
Hello, this website that I'm working on, I'm trying to find a way to have the background of this page to stretch the entire window no matter how i resize it similar to a cover page but theres always that grey footer underneath it. I tried:
in Code Header injection
<style>#header {
display: none !important;
#preFooter {
display: none !important;
}
#footer {
display: none !important;
}
#page {
width: 100% !important;
min-height: 700px !important;
padding:20px !important;
margin: 0px !important;
max-width: 100% !important;
}</style>
In page settings
<style>
#footer {
display: none !important;
}
</style>
It gets rid of the footer content and the prefooter, but for the actual footer? Nothing worked....
How can I have it so the background stretches the entire window? I'm basically trying to make it look like a cover page but with html functionality so i can add things like javascript / jquery. I have a similar theme using this template but I just need to get rid of that pesky footer. Help?
Its the white block at the bottom of my current page. Please help me destroy it... http://prntscr.com/aaelvf
it's the grey block on the bottom the standard template. Please help me destroy it... http://prntscr.com/aaeo8m
All help is appreciated. Thanks.
The footer IS hidden (you've hid the hell out of that thing). What's left is just an empty html tag. You'll need to add some content to make the page wrap further, or set the height initially to be higher (which will at least give it a white background), ie.
#page {
width: 100% !important;
min-height: 1200px;
padding: 20px !important;
margin: 0px !important;
max-width: 100% !important;
}
However, idk that you want to set the page to be 1200px by default. You might want to take a look at the image itself, and adjust the height that's being set by squarespace (806px).
style="top: 0px; left: -135px; width: 1210px; height: 806px; position: relative;"
I was experimenting with text scrolling over a limited fixed background image (not sure what it's called exactly - where it's like parallax scrolling but the background image doesn't move at all?) and everything's fine except that I'm getting a small (5-10px) margin or padding between the bottom of the "upper" image and the bottom of the background image.
The bottom margin and bottom padding are both set to 0px (I've also tried it at 0%, with no improvement). I've also tried both negative margins and negative padding, neither of which had any effect either.
I tried a simple CSS reset, which solved a separate issue with unwanted side margins, but this problem persists. (And it's the same in every browser.)
I'm sure I'm missing something very simple, but I haven't found an answer for this exact problem. Any insight is greatly appreciated.
*
{
margin: 0px;
padding: 0px;
}
#text_and_image
{
text-align: center;
font-family: 'Montserrat Subrayada', sans-serif;
background: url(/images/fountain.png);
background-attachment: fixed;
background-size: 100%;
padding-top: 25%;
padding-bottom: 0px;
margin-bottom: 0px;
background-repeat: no-repeat;
}
The HTML:
<div id="text_and_image">
<p>this is the third one<br>it has both TEXT<br>and an IMAGE</p>
<img src="/images/bird_palm.png">
</div>
It is hard to tell without your image dimensions but I imagine the background image is being contracted or expanded due to the background-size: 100%; in the css. Set both of the images to the same width and see if the problem persists.
Okay, I've been trying to solve this question for years. I've tried a number of different solutions, but finding myself facing the same problem again, I'd really like to ask the community for the best way to solve this problem.
I want to have two images on the background of my page: 1 as an xy-tiled "texture", and another image which will hug the very bottom right of the entire page, regardless of the page height. So, the page will look like this:
This was accomplished not through a background img() in my CSS, but with an image near the footer, like so:
<style>
.specialImage{
position: absolute;
bottom:0;
right:0;
z-index:-99; /* or higher/lower depending on other elements */
}
</style>
<img src="/static/assets/img/stain.png" class="specialImage" />
The problem with this is that if the page is longer than the screen, this happens:
No good. Changing position to 'fixed' cause it to have a 'sticky' effect, which I don't want. So this avenue is a no-go.
Route 2: the CSS background solution. Unfortunately, this code doesn't work:
body {
color: #333333;
background:
url("/static/assets/img/fabric_1.png"),
url("/static/assets/img/stain.png");
background-repeat: repeat,
no-repeat;
background-position: 0 0,
right bottom;
}
So, I tried this:
html{
background:
url("/static/assets/img/fabric_1.png");
background-repeat: repeat;
background-position: 0 0;
}
body {
background:
url("/static/assets/img/stain.png");
background-repeat:
no-repeat;
background-position:
right bottom;
}
Which, for the long page, works! Hooray! But, when I go back to the short page, now it looks like this:
Sonofabitch!
So what's the solution here? Sticky footers? Min-heights? Wrappers? None of the solutions I've tried so far produce the desired behaviour in both situations.
StackOverflow elders, what should I do?
Thanks!,
R
As I understand you want to stick background image to bottom and right?
so solution is:
body { background: url("/static/assets/img/stain.png") right bottom no-repeat; }
Hmm, with css3 you can use multiple backgrounds. Can you try this?
html{
background: url("/static/assets/img/fabric_1.png"), url("/static/assets/img/stain.png");
background-repeat: repeat, no-repeat;
background-position: 0 0, right bottom;
}
body {
color: #333333;
}
Running into the same issue, my solution involves setting the html element to have a min-height of 100% with a height of auto:
body, html {
width:100%;
height:auto;
min-height:100%;
margin: 0px;
padding: 0px;
}
body {
background-image: url(../images/bkgrnd-footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}
Shorter pages are forced to the viewing window height and longer pages picks up the auto height.
You could always set the height of body to 100% then it should work.
To clarify: Then you can have a background image in the html element and in the body element, pretty much as you've allready tried:
html {
height: 100%;
background: url(html.png) bottom right no-repeat;
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
height: 100%;
background: url(body.png) bottom right no-repeat;
}
Just tested a bit more, and it seems it doesn't work in IE10's Internet Explorer 5 quirks mode, but i really hope that isn't a dealbreaker for youl, because you don't seem to be working with a strange legacy product.
The purple square is the html-background-image and the reddish is the body-background-image.
Thank you for posting. I was having the same problem. I resolved it by adding the background image to a container div for my content set at 100% width. The container closes before my footer, but you could probably try putting it outside the footer also if you need your image to go to the bottom of the page. I only wanted mine to go to the bottom right of my content.
Here's my div structure:
<html> Background image
<body> Padding
<div id="outerWrapper"> Background applied outside content
<div id="borderWrapper"> Contains content
<div id="contentWrap"> Sets up container positioning for child elements
I have a background image which i need to display vertically as long as the content on the page, but, my background image only shows to the page in view and when I scroll down for the rest of the content the background is not shown in the rest of the page. What am I doing wrong?
css for the background image
#wrapper {
text-align: left;
margin: 0px auto;
border:0;
width: 960px;
height: 100%;
background-image: url('/images_/backgrounds/content_shadow.png');
background-repeat: repeat-y;
}
Try applying the background-image and background-repeat rules to body instead of #wrapper.
Try adjusting the height property, the 100% is relative to what?
Generally i prefer defining height rules with min-height.
My guess is that the wrapper div isn't extending to the bottom of the content either. Try setting the border of wrapper to:
border: 1px solid black;
You might find that the background is behaving just fine, and the div isn't doing what you want.
Apply the background image styling to html{ } instead.
remove the height: 100%; from css.