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.
Related
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.
(Source:http://imgur.com/5pKaiea.)
Hey I basicly got two of the files above one "header" and one "footer" both same size kinda just flipped.
The problem is the width doesn't fit on page, any ways other than background-image: cover?
The file is basicly 1280 px wide and around 114 px tall.
div #header {
background-image:url(../img/webclient_header.png);
height: 114px;
width: initial;
margin: 0; /* If you want no margin */
padding: 0; /*if your want to padding */
}
In CSS you can use the property background-size to resize the image to fit:
div #header {
background-image:url(../img/webclient_header.png);
background-size:800px 114px; /* Choose your size here W x H */
height: 114px;
width: initial;
margin: 0; /* If you want no margin */
padding: 0; /*if your want to padding */
}
UPDATE: Checkout the code update on jsfiddle http://jsfiddle.net/bKZ8N/
If you're looking to have responsive images on your website, background-image is not really the best path to take. You'd need to either use may CSS media queries to serve different background images sizes or use something like background-size property which is not compatible with older browsers.
I would suggest doing something like this:
<header>
<img src="you-image.jpg" width="100%" height="auto" />
</header>
That's a lot going on for one header / footer image... I would look into possibly breaking it up.. You can make the center part a set width of the whole site that would essentially contain the menu. Then after that you would cut a 1px width (x-value)px height and use that as a repeating background behind your header div. The other elements can be strategically planned to be added to other portions of the site to better reflect the image.
Not a great answer, but it is what I would do in this situation. Otherwise you're looking at the image being stretched and possibly lose some focus.
EDIT:
To answer your question in comments
Kind of...
So you would have at least 3 images header_middle_piece.jpg (the middle of the image that is pointing "down"), footer_middle_piece.jpg (the rotated version of header.), and repeating_pattern.jpg
From there you would have your leveled layout.
<div id="header">
<div id="container">
<div id="content"></div>
</div>
</div>
Use the same type of layout for your footer.
#header{
width: 100%;
background: url('repeating_pattern.jpg') repeat 0 0 scroll transparent;
height: 20px; // Make this the height of the pattern you are using.
}
#container{
background: url('header_middle_piece.jpg') no-repeat 0 0 scroll transparent;
height: 40px; // height of the middle piece.
width: 200px; // width of middle piece
margin: 0 auto; // center the container.
}
Those are the only styles you need to get that working in the whole. After wards you would need to target the background for the repeating background of those stripes if you still do those, and make a div for the other shapes. If you didn't make this image you will have a hard time breaking it up. But it is doable.
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
What I want is to show "Loading..." as a simple text while page is loading and I want the text to be centered both - horizontally and vertically. I go through a lot of examples and now I have some sort of solution which seems to work, but I have some doubts that the effect will be the same all the time and that my code is even close to a good CSS.
What I have is a index.php page where right after the <body> tag I have this:
<body>
<div id="loading-standard-user">
<p id="loading-standard-user-text">Loading...</p>
</div>
Later on I have a function that take care for hiding the text when page is loaded, but what concern's me is the styling of the <div> and <p> tags.
Here is my CSS:
#loading-standard-user {
width: 100%;
}
#loading-standard-user-text {
position: fixed;
width: 100%;
text-align: center;
font-size: 40px;
font-family: arial;
top: 50%;
margin-top: -40px;
}
I'm pretty sure that I have some unnecessary code and at the same time I miss something, one thing that I wonder is that my font-size: 40px which would have to mean that if I want my code to be vertically centered later on my margin-top should have value equal to half the size of my font, but visually it looks centered when margin-top is with the size of the font.
Anyways any thoughts on the styling and where are my mistakes and how could I do it right?
Thanks
Leron
Your CSS code seems to do almost exactly what you want. The only problem with it that I can find is that your margin-top should be -50% of the height. Your div height is 40px (which is the font size), so your margin-top should be -20px to center it exactly.
In more detail: top: 50% sets the top of the text halfway the container. Then margin-top: -20px moves it up 20px to center it.
Edit:
If you want to use em, like suggested by #mgibsonbr, try the following CSS:
#loading-standard-user {
position: fixed;
width: 100%;
height:40px;
top: 50%;
margin-top: -2em;
}
#loading-standard-user-text {
width: 100%;
text-align: center;
font-size: 4em;
font-family: arial;
}
The #loading-standard-user seems unnecessary, your exampled worked fine (on Firefox and Chrome at least) with just the second rule. (the fact you're using position: fixed on the inner div makes where you place the outer irrelevant)
For the top and margin-top issue, it might look like it's centered, but that does not mean it actually is:
And if you're worried about resizing the text later, I'd suggest using em instead of px for setting your sizes, this way they will be automatically adjusted when the user resized the browser text. 1 em is the height of the uppercase "M", while 1 ex is the height of the lowercase "x".
(Unfortunatly, in practice I couldn't make it work with em while with px it worked just fine. Maybe I'm missing something?)
My website's logo shows up normally in firefox and such, but in internet explorer the logo shows up behind the background image and it's really bad looking. Can someone tell me how to make the logo appear in frount of the background image?
Site like so you can take a look at the codeing: http://turquoisegrotto.com/
Get rid of all your wacky * selectors, add a strict DOCTYPE and try again. The logo isn't behind the background, it's offscreen somewhere.
EDIT: You have a DOCTYPE, get rid of the comment above it. DOCTYPE must be on the very first line.
You write some whacky CSS, what's with all the negative margins? I'd stay away from that stuff, not sure why your #navi had 120px height on it either, (and hence all the -margins).
Still, no reason for IE to put a logo behind the body's background-image! That was strange for sure.
Anyway these changes will bring the logo back into the magical world of the body:
body {
background-color: #CCFFFF;
color: #000000;
font-family: Tahoma;
text-align: center;
background-image:url("images/bg.png");
background-position: top left;
background-repeat: repeat-x;
/* changed */
margin-top: 0;
}
#navi{
width: 100%;
background-color: transparent;
text-align: left;
/* changed */
margin-top: 3px;
height: 20px;
}
#logo{
height: 120px;
background-color: transparent;
margin-bottom: 70px;
/* changed */
margin-top: 5px;
}
I'm sure your other elements will need adjusting since the logo and nav don't have big negative margins anymore.
Try setting the z-index (CSS Property) of the logo image to 10.