For some reason the background on my website is not loading fully. Randomly, not all the time, the website will load with white rectangles around the content of the website. Check out this screenshot to get a better picture, or visit www.thinkitpostit.com to see if it randomly happens for you. Thanks in advance!
I see you are using a
width:800px;
on your body tag.
This could possibly cause some trouble since the background color is placed on the body tag.
I would generally recommend to not use any width or height properties on the body tag.
Related
I am using jquery and ajax to load different pages into my index page. links are targeted to open in a specific DiV and for some reason Every page that I create seems to have this white border at the top. I removed the padding from the css but for some reason every page that I load into the div pops up with white border at the top with the text in it. I want to remove this white border and align the content area to the center. Please help me
the code is a bit much to post please visit my website for a live view... only working links are Roster, and Labels....
http://www.trillumonopoly.com
Just take the background-color css rule off body.
Also, every major browser has a devtools component nowadays - it is your best friend.
edit: I see that it's applied by bootstrap. You can override it by specifying body { background-color: none; }
By the way, I think it's bad practice to apply a background image to the html node. Instead, apply it to the body node.
I'm creating a website and have a problem with the way it displays in different browsers. I'm testing using Chrome, iOS and IE8. The site displays correctly in the first two, but not so in IE.
The website in question is http://www.edalemill.co.uk/
Can anyone help point out what's wrong with my CSS to solve the problem?
Thanks!
I have taken a look and can replicate the issue.
I would suggest removing the
overflow:auto; from the #stripper
You have also used body more then once as well in your CSS, I would suggest having only one lot and tidying up your code.
Possibly consider using this as a base which should help you:
http://meyerweb.com/eric/tools/css/reset/
UPDATE
Otherwise for your code do the following for the CSS
#sidebar {
position:fixed;
}
I would recommend making that IE8 code only though
If you take out the height:100% on #container the background image fills up the rest of the text area for the about page.
Let me know if this helped.
Update
It might just be easier to have another CSS tag for the content areas that scroll. The height:100% works on those content areas that don't scroll, however, they break on those that do. My recommendation, even though it might not be the best way, is to either make a second CSS tag for the content areas that scroll, or just simply make the image bigger.
The problem is as follows:
I have a header which has a width of 100% (thus it is from side to side of the screen). My background image, starts soon after the header.
In the body I have a box with contents which is centered. When I resize the window I want that the background is overlapped, thus I want this content box to move to the left when doing so. Until it reaches a limit that the background is completely hidden. It will then reach a point that the box cannot shrink thus having a min-width.
How shall I make the box of content overlap the background without hindering the header?
(BTW I have no idea what the tags are. Because this website is asking me for tags)
Thanks
This layout is called Elastic because the page contents adjust as the window does.
Since you didn't provide the HTML, we can't help you anymore than providing the relevant CSS style to apply to your mysterious "box".
style="width:80%; min-width:500px;"
If you're messing with HTML and CSS, I strongly recommend reading up on the basics. The more you know yourself, the more we can help you.
As the title states,
I am currently building a website, I am new to this and am trying to learn quickly. However this problem is quite frustrating as websites I have gone to do not help.
So at the moment I have an image that is of a high enough resolution that it should fill the screen easily. However when I load the HTML the image is zoomed in on the top right corner which is the only part visible. I have tried using "height" and "width" commands. I have also tried without them. I have attempted to use a <div> and <body>. However this problem still persists.
Another point is that when I use a <div> the whole screen is not filled, it still has a white border around what I believe is the <div>.
If you need to support older browsers, it's not as simple as just adding one or two properties.
Read this: http://css-tricks.com/3458-perfect-full-page-background-image/
Another point is that when I use a <div> the whole screen is not
filled, it still has a white border around what I believe is the
<div>.
You need this CSS to remove the default margin on body:
html, body {
margin: 0;
padding: 0;
}
OK, I would suggest you to make the width and height not in px but in % and secondly try setting the image using CSS
Read this Link, it will be more useful
http://css-tricks.com/3458-perfect-full-page-background-image/
I've noticed that recently sites began to keep images in one big image.
For example google.com
We see a lot of little images on left side. But really is one image:
How these images are cut and shown? (firebug says that it's just element with width and height, but where X and Y position is pointed and how?)
Thanks for reply
with css background the image is moved to the right position. the other part of the image is not shown, because the element with the image as background is exactly as big as the wanted picture part.
try changing the px values in the css in the background part. you should see the image moving
<span style="background-position:-20px -132px" class="micon"></span>
here you see the background-position which is used for this image
This technology is called CSS Sprite. To reduce the http connections number needed to load multiple images. Usually this is done by designer.
This is called "CSS Sprites".
There are a lot of informations on Internet about that. In random order :
Smashing Magazine
CSS Tricks
A List Apart
And many more ...