I have a background image on the html and the body tags as I have a repeating background on the html that I want to grow in height with the content. On top of this is the body background image - which is the main background image (that appears to dissolve into the html image, but it's just overlapping it).
This is working fine EXCEPT for when someone does a browser zoom. Oddly, the HTML background begins to creep over the body background on the right hand side.
html {
margin: 0; padding: 0; border: 0;
background: #000000 url("menu/images/redline2.jpg") repeat-y center;
}
body {
margin: 0; padding: 0; border: 0;
background: url("menu/images/about_bg2.jpg") no-repeat center;
}
Link to example of the issue: http://www.bitchofrome.com/about/about3.html
This is a common issue, and there's a simple solution for it. It often happens when you have a 100% width container with a background color or image. If you narrow down the browser window (or zoom) and then scroll right, the background has disappeared (as it doesn't get redrawn). The fix is to set a min-width on the outer container equal to (or greater than) the width of the inner elements.
In this case, what's needed is this:
html {min-width: 1100px;}
Related
I'm having a problem displaying a small image using CSS. I'm trying to show an icon sized picture (the picture has a few pixel border so it isn't edge to edge) but the image itself isn't centered when it's displayed and part of it is being hidden by the right and bottom shadows of the surrounding box. I like the look of the shadows but I think the image is so small, the shadows of the box can't be ignored in the sizing. Here's my CSS. Any ideas?
.delete_button {
background: url('trash_can.png');
background-repeat: no-repeat;
width: 20px;
height: 24px;
display: inline;
}
Try this, adjusting the background-position values until your image is positioned correctly:
.delete_button {
background: url('trash_can.png');
background-repeat: no-repeat;
width: 20px;
height: 24px;
display: inline;
background-position : -3px -4px;
}
Expanding on this a little further, you might want to try to add all your small images into one icon image in a matrix style. Then you can select just the image you want using the width, height and background-position. This will allow all your icons to be loaded at once as a single file, reducing internet traffic. When a "new" icon is needed, it will already be cached and immediately be available.
background-image: url("icons.png");
background-position: 30px 40px; /* Use these values to select your small image contained in your large image */
background-repeat : repeat;
width : 20px; /* or however large your icon is */
height : 24px; /* or however large your icon is */
I'm trying to build a webpage with 3 columns. The one in the middle (centered) needs to have fixed width (1000px) and the other 2 with no specific width. When the user resizes the window only the left one and the right one should be resized. Is this possible?
Regards
Yes this is possible
You should create one maindiv in your css and set the background to repeat in your body like shown below and give it a background color/gradient/whatever you like. I usually use a 1px width gradient picture.
Setting the same background color and image in your div as in your body will help you keep an even background depending on your design (i.e. You have a design that has a margin at the bottom of 20px to create a clear space, then the background will follow through instead of showing white)
STYLESHEET.CSS
body {
margin: 0px;
background-position: 0px 0px;
background-repeat: repeat-x;
background-color: #03255d;
background-image: url(../img/bg_gradient.gif);
}
#MainDiv {
position: absolute;
width: 1000px; /* width of middle column */
z-index: 1;
top: 0%;
left: 50%;
margin-left: -500px; /* should be half and minus of width to center it */
background-color: #03255d; /* set background color same as body */
background-image: url(../img/bg_gradient.gif); /* set background image same as body */
}
Now in your HTML after the body tag you start with your MainDiv and before the body end tag you close the MainDiv
INDEX.HTML
<body>
<div id="MainDiv">
Your HTML here
</div>
</body>
Now when you resize your browser, it resizes the background and your middle column stays centered
I have a background image in the body of my page set to bottom right. But when the content within the page stretches beyond the screen the background image stops at the edge of the screen instead of where the actual content ends.
Here's the relevant css:
html, body {
margin : 0;
padding : 0;
font-family : arial, sans-serif;
background-color : #15242d;
height: 100%;height:auto;
min-width: 100%;width:auto;
font-size: 15px;
color: #959595;
}
body {
background-image : url(images/body_bkg.gif);
background-repeat: no-repeat;
background-position:right bottom;
}
Whats the best way to get around this issue?
If you don't already have one, you need to wrap the content of your website in a containing div which will expand to the size of the content. Then you need to apply the background image to that div, instead of putting it on the body.
I have a site design that uses background images and textures as a feature of the site.
See background design concept here: http://www.flickr.com/photos/54233587#N03/6145240784/in/photostream
The background is intended to work like this:
The page background has a tiled pattern (or on some pages there will be solid background colour).
The top part of the background is overlayed with a background image. The background image is a large image (2000px wide) and needs to be centred in the window. Depending on the page, the height of the image will crop from the bottom (that is, on one page the image may need to be 400px, while on others it may be 450px). This background image also has a CSS3 box-shadow applied so there is a slight shadow at the bottom of the image. This background image cannot use a fixed position - that is, it should move with the page if it is scrolled.
All other page content sits on top of the background in a centered div, indicated by the black box in the screenshot.
I have tried to achieve this by targeting the HTML5 html node for the tiled background.
html {
background: url(../img/pegboard.jpg) repeat center;
}
Then, for the overlaying background image I've been using a div element to insert an image.
<div id="bgimage"><img src="mybgimage.jpb"></div>
Then styling the img to try and center, not be fixed when scrolling, and resize the div to crop image from bottom. All without much success.
Thanks.
I would do something like this.
HTML:
<div id="bgimage"></div>
<div id="content">
Actual content goes here.
</div>
CSS:
body {
background: url(../img/pegboard.jpg) repeat center;
}
#bgimage {
position: absolute;
top: 0;
left: 0;
right: 0;
background: url(../img/mybgimage.jpg) no-repeat center;
height: 400px;
box-shadow: 0 5px 5px -5px #000;
}
#content{
margin: 0 auto;
width: 960px;
height: 1000px;
background: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}
I have a background image, that is simply a wrapper for the main content of my page.
I have set this image a background image like:
#background {
background: url("../image/bg.png") repeat-y 133px 50px;
color: #000000;
font-family: Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
}
I would have thought that this would position the image 133px from the left and 50px from the top, but it is flush against the top of the browser.
Can anyone shed any light on why this is doing this?
Thanks
Can this kind of position be done when the image has repeat-y?
Thanks
You are using repeat-y so the background is repeated vertically, both down and up. The value you specified - 50px - is the place where the original background starts, but if your background has a height of 50px, you will not notice the difference as it is repeated above it as well.