I have a background such as the below:
Trouble is I want to set the width of the containing box to only cover up to the end of the white areas & hence the shadow should "overflow". I don't want to use an out container or padding as I am trying to avoid extra width; if the background overflows then the browser isn't going to create horizontal; scrollbars for this and that's exactly what I want.
Is there any way I can accomplish this or will I be forced to use the full width?
Backgrounds on <body> don't affect the scrollbars, so depending on what you need the shadow for you might be able to do something similar to this;
body {
background: url(http://i.stack.imgur.com/ftW5z.png) no-repeat center top;
margin: 0;
}
.container {
width: 1014px; /* inner space of shadow image */
margin: 35px auto; /* 35px matches size of top shadow */
}
Demo at http://jsfiddle.net/gjsxn/2/
You can likely achieve the same effect with another container and use of min-width and overflow hidden.
Related
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.
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 ?
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/
I am creating a page that has a background image and the content is within a centered container that runs vertically down the page. Similar to the Yahoo! Answers layout: http://uk.answers.yahoo.com/
If you minimise your browser while on Yahoo! Answers the vertical scrolling just becomes 'longer' and the content all stays on the white container.
However, on mine when I minimise my browser the content towards the bottom of the container overflows and appears on the background image instead. I want the container to expand..
I do not want to use the overflow:auto or any other overflow attributes and I don't like the scroll bars.
Please see below and thank you in advance:
body {
background-image: url('images/ppback.jpg');
padding: 0;
margin: 0;
width:100%;
height:100%;
}
#container {
position: relative;
background: #440077;
width: 770px;
margin:0 auto;
top: 0px;
height: 100%;
opacity: .7;
filter:alpha(opacity=70);
)
Just remove the value height: 100% from #container. This is setting the max height of your container to the same height as the browser window, preventing anything longer than the window from being displayed.
I'm guessing that you added this property so that the entire background will display on the page when there is little page content. To get the effect you're looking for you may have to create a separate div, in a fixed position, and positioned center, with a z index smaller than your main #container.
I'm working on a site for a client in which there's a background image that will be centered on the page with text, links, etc. overlayed.
I currently have the image resized as follows:
img.bg
{
height:100%;
position:absolute;
}
This fits the image to the height of the browser, but aligns it to the left. I need it to be centered.
Since I need it to be conditionally responsive to browser-height variations, the usual centering tricks aren't working.
Thanks!
Try removing "position:absolute" and adding margin: 0 auto. For example:
img.bg
{
height:100%;
margin: 0 auto;
}
or may be just place it inside a table <table align="center"> <tr><td>"image goes here"</td></tr> it's easier to manage cause you can add more items to the webpage in future without difficulty, add borders, change colours of tables, etc.
I can think of a couple ways to go about it (untested, so you'll probably have to tweak):
img.bg {
position: absolute;
/* Top and/or bottom for stretching it vertically as needed. Setting both will likely make it the size of the whole body, so beware. Remove bottom to keep it from doing that if necessary. */
top: 0;
bottom: 0;
/* Left and/or right for sizing/positioning */
left: 25%; /* Percentage position will make it adjust to browser window size, exact percent may need to be tweaked to get right and will depend on the image's size. */
}
img.bg {
display: block;
height: 100%;
width: 500px; /* Whatever your desired width is. */
margin: 0 auto; /* This should work as long as width is set. */
}
Depending on your exact design, either of these should work and be responsive to the size of the browser window. The second one is probably the most flexible and easiest to implement, since you don't have to fiddle with positioning.
The answer depends on exactly what you are after.
If you want an image displayed in the background of the website (which I think you are saying) then I am not sure what method you are using, but if you do away with your img.bg{} in your html and css, and just put the following into your CSS you will get what you want...
body{
background-image:url('background.gif'); // substitute background.gif for the correct file path
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:auto 100%;
}