Misalignment between centered Background image and centered DIV depending on browser width - html

I have a background image with a square which has the same size as a div that is covering this square. (There is a god reason for this not mentioned here). When centering this background image and the div, they do not overlap on certain browser width's. When re-sizing the browser, sometimes the background square is misaligned by 1 pixel. As you can see in the example below and in the JSFiddle, 1 pixel of the background square is visible sometimes when dragging the width of the browser.
Is there a solution for this? Why is the positioning between the elements not synced?
Try to re-size the fiddle-view-port width and you will see that the cyan background-square sometimes is visible when the misalignment occur.
JSFiddle: http://jsfiddle.net/jj3qxL3k/
Code:
<div>CONTENT DIV</div>
CSS
div{
background-color: yellow;
width: 800px;
margin: 0 auto;
}
html{
background: url(http://s29.postimg.org/42cuy8m7b/tester.png) center center repeat;
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
}
Tried this without any luck:
/* Fix form centering background input chrome */
#media screen and (-webkit-min-device-pixel-ratio:0) {
html {
margin-left: 1px;
}
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background-position: 50.001% 0;
}
}
By the way... This happens for me in Chrome Version 43.0.2357.81 m.

This depends on how the browser handles uneven values and aligns backgrounds and content.
This happens when your container has an odd width value since your element inside the container has an even width value. For example if your element is 800px wide and the container is 855px wide then there would be 855-800 = 55px of space left around your element and now the browser has to divide that for the two sides. It would come down to 22.5 pixels per side but since it can't paint half a pixel it has to round the number. So one side of the element would get 23px and the other side 22px.
Now it could be argued that the background image itself is treated the same way so the alignment should be the same, but in fact this is solely up to how the browser is built so that's why you are getting different results in different browsers.
It's rather hard to suggest a workaround without seeing the actual project since it would probably have to be a different solution all together.

Related

How to adjust size of letter background?

I have a word with a background colour. This is fine except that I want the background color a certain size in relation to the word. Simply putting background-color: blue,gives the word a background color and display: inline-block makes the color fit the word exactly. So far so good. The problem is as soon as I increase the font size, the background colour shape warps and either goes into a square covering half the word or goes into a line covering the width but not the height.
#media (min-width: 768px) {
.about5 {
color: red;
background-color: blue;
display: inline-block;
position: relative;
font-size: 90px;
left: 320px;
font-weight: bolder;
transform: rotate(90deg);
bottom: 100px;
z-index: 3 !important;
}
}
<div class="about5">About</div>
This gives a background colour of blue which covers half the word but not the other half.
So how do I get it to cover the whole word and fit exactly, even to perhaps add a bit of padding?
Can I just apply width and height or is there another way?
Thanks.
The page is here and it differs according to desktop mobile.
I inspected the element on your site and saw that your about5 class has the attributes of width and height both set to 100px. Either you specified those dimensions or they were inherited from a parent element. Get rid of your height element only, then change width to auto and add padding: 3%. That's what ended up working for me in the Inspector for your site, although the code works just fine for me in this JSFiddle: https://jsfiddle.net/z0keyftb/

Problems with zoom in HTML (browser window)

I have created a small HTML-Site, but the zoom in my browser completely breaks it. On fullscreen and 100% zoom it looks fine, but when zoombing or resizing the browser window all the elements just resize and move randomly on the screen. What i want is a zoom, that does not move anything but resize the whole page (like zooming an image) (how) is this posible? :-)
You must use fixed values.
It seems that you are using percent values for styling your website.
And there is a simple trick that you make a container div and add it a fixed width then you can have percent in child elements.
.container { width:900px; margin:0 auto; }
.container .logo { width: 25%; /* 25 percent of 900px */ }
.container .navigation { width:75%; /* 75 percent of 900px */ }
You may also need to reset margin and padding values.

How to align 100% width background div perfectly to the a horizontally centered page or div

Css
body {
margin: 0;
padding 0;
min-width: 1072px;
height: 100%;
background: url('bg_repeat.png') center top repeat;
}
.bg {
min-height: 100%;
background: url('bg_center.png') center top repeat-y;
}
.page {
width: 1024px;
margin: 0 auto;
position: relative;
}
Html
<body>
<div class="bg">
<div class="page"></div>
</div>
</body>
It's essentially a centered fixed width page with a pattern background and an additional bg div to add a vertical gradient lighting effect.
The problem:
When I have a 100% width div next to a horizontally centered div, I get those 1px back and forth shifts when resizing the browser window horizontally.
.page does not align to the backgrounds of bg and body or their centered text. In otherwords .page does not remain in the same exact horizontal position relative to the background image's position.
It's a minor problem. I don't have any pixel-perfect patterns or anything. I'm more just curious about this if it's even possible. I have seen IE 11 blurring or doing some half-a-pixel shifts with pixel perfect repeating backgrounds with certain window widths.
FIDDLE: http://jsfiddle.net/HJsNY/
However the problem does not reproduce in the fiddle. But the exact code causes 1px offsets in a full window. (using Chrome)
EDIT: Actually this jsfiddle does reproduce in Chrome. But only when the iframe width gets large enough (>~1300px) for some reason. On FF it's noticable on small window widths too.
Here's what happens: 1px background offset that keeps alternating when resizing browser window.
I think you need a css reset. Firefox (like every browser) displays css with some intern css. You must remove it.
Add this to your html :
* {
margin: 0;
padding: 0;
}
I updated your JsFiddle.
If you want more info this, I already wrote it here.
Did it solve your case ?

How can I make a white rectangle extend all the way down, on top of another background?

I'm a complete beginner. I tried my best to search for a solution, but part of the problem is that I don't even know what the technical term is for the thing I'm trying to do.
Essentially I want to have a tiled background repeating everywhere, but then also have a white rectangle that extends from the top of the page to the bottom, occupying roughly 50% of the horizontal screen space. How would I go about accomplishing this?
If I get it correctly, you might just want a repeated background of the page and then absolutely-positioned <div> with white background.
This is pretty basic stuff, I suggest you take a beginner's course in HTML and CSS before going too much further.
body {background: url(tile.png) left top repeat;}
content {background-color: #fff; margin: 0px auto; width: 50%;}
I hope this is what you wanted. It is a tiled, repeating background with a white strip, half the screen space, going down the middle. If you want a tiled background, you don't need to define anything in CSS, and CSS will do it for you, but I'm not sure with the browser compatibility so it might be safer to explicitly define repeat:.
First of all, to those complaining that height: 100% does not work, note that the div with height: 100% is only being the height: 100% of its parent element (the container that encloses the div, in the case of this JSFiddle, the #container). Therefore, if its parent has no content, the div with 100% height will become invisible.
Therefore, the html, body and container must all have height: 100% for the white strip to have 100% height here in this JSFiddle:
JSFiddle
After this you are free to add any content to the white strip, which will probably be your webpage! :D
Note: Here I have defined the strip as width: 50%; but sometimes it may be better to explicitly define the width (width: 1200px;) so that you can avoid problems with the text and divs going haywire when you zoom in, zoom out, etc.
Edit:
Also, since the height of the container increases as you add more content, such as divs, the problem with the white strip not reaching the bottom of the page is that you simply have nothing that fills it up. As you add more content the strip will naturally grow to fill the page. Good luck!
Solution 1
Here's a solution that uses only the background CSS property applied to document body, no extra elements needed. It's documented so you can understand whats going on.
body
{
/*
* This specifies two background images, separated by comma
* First parameter is just a white pixel
* For the second use any background pattern of your choice
*/
background-image:url("http://i.imgur.com/qdx0kzd.png"),
url("http://subtlepatterns.com/patterns/tasky_pattern.png");
/*Center background images, self-explanatory*/
background-position: center;
/*Repeat white background image on Y-axis (vertical) only*/
background-repeat: repeat-y, repeat;
/*Make white background size 50%. Adjust as needed*/
background-size: 50%, auto;
}
You can see an example in this fiddle: http://jsfiddle.net/dV2zZ/6/
Solution 2
This solution applies different backgrounds to different elements: the pattern to the document body, and the white background to a content container. Code is also documented for better understanding.
HTML
<div id="content">Content</div>
CSS
html, body
{
margin: 0;
/* Make document size extend to the bottom of the page */
height: 100%;
}
body
{
/*Patern background. Use a pattern of your choice*/
background-image: url("http://subtlepatterns.com/patterns/tasky_pattern.png");
}
#content
{
/*Make container background white*/
background-color: #FFFFFF;
/*Center container*/
margin: 0 auto;
/*Size 50%, adjust as needed*/
width: 50%;
/*Extend to the bottom*/
height: 100%;
}
See an example fiddle here: http://jsfiddle.net/jDRG3/1/

HTML/CSS: Creating a div that doesn't trigger a horizontal scrollbar if it's wider than the screen size

I'm trying to improve user compatibility of a site for 800 x 600px monitors.
I have a 'headerbackground' div which is 900px wide, and contains nothing but a background image. The rest of the site is nested inside that div, with a width of 790px.
What I'd like to do is show the full 900px 'headerbackground' div if the browser window is greater than 900px, but not trigger a horizontal scrollbar in the browser if the screen res is between 790 & 900px.
I'm aware that this can be easily achieved with a centered 'background' image on the body tag, but that isn't a feasible option in this case because the current body background image has a horizontally-repeating background, and the header background image doesn't repeat.
Any suggestions appreciated
Edit: Image attached for clarity.
If you use the CSS background-image property for your 'headerbackground div,' and headerbackground is less than the size of the background image, a scroll bar will not be triggered. Rather, the background image will be truncated.
Update:
You should be able to make your headerbackground div non fixed-width so it fills the entire body. Then, you could make its background image centered. Try this for your CSS:
body { background-color: blue; }
#headerbackground {
background-color: red;
background-image: url(your/url.png);
background-position: center top;
margin-left: auto;
margin-right: auto;
}
#content {
background-color: green;
width: 790px;
margin-left: auto;
margin-right: auto;
}
...Aand a couple minutes after I post, I figure it out for myself. Sorry. In case anyone else has the same problem:
Give headerbackground div a width of 100%, and a min-width the same as the internal divs. Center the headerbackground div's background image. Finally, you'll need a min-width hack to make IE 6 happy.