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.
Related
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;}
hey hoping someone can help me. It's for my portfolio I'm building at www.pxlmin.com/portfolio
What I want is for the background color to take up the whole width, and it does, but when I resize the window down-to say half the width-I just get white space off to the side, (when I scroll to the right), so what I'm wondering is how can I get the background of both the center and the container to extend off to the left.. I have width 100% but it's obviously not doing the trick. Thanks.
Remove width: 100%; from #portContainer and #middlePort. Hope this would solve your issue.
You could add the main background color to the body tag:
body{
margin: 0;
padding: 0;
background: #EFE6D9
}
or use a background image which has the stripes in - but as the above remove the 100% width or set the left and right borders to 0. The white bit is probably 6 pixels which is the the borders being added to the width.
#middlePort {
background: #E8DED0;
height: 300px;
border: 3px solid #E2DAD0;
padding-top: 49px;
}
or
#middlePort {
background: #E8DED0;
height: 300px;
width: 100%;
border-bottom: 3px solid #E2DAD0;
border-top: 3px solid #E2DAD0;
padding-top: 49px;
}
ahha, figured it out.. just set a min-width greater than the amount of the content you need to fill with the background. in my case div #middleport min-width: 1500px;
Amazing the amount of pages that have these fall off backgrounds though (when viewport width reduced and scolled to the right).. tinygrab.com, nodejs.org to name a couple..
I'm curently workign on this page and I'm trying to make the background repeat-y from a certain height but to no avail. If you look at the link's background (bottom area); you'll see that it leaves a an ugly space there, which is ugly. The CSS is as show below
body {
font-family:Calibri;
font-size: 16px;
margin: 0px;
padding: 0px;
background-color: #000;
background-image: url(images/bg.png);
background-repeat: repeat -200px 0px;
}
There's no way I'm aware of that makes the repeat skip some pixels. If I were you I would split them so the background-image of the body would be what the majority of it is now without the top. And then I would add a div to the top with these settings:
<div id="upperpart"></div>
in css:
#upperpart{
background-image: url(whatever it is);
width:100%;
height:how high it is
background-repeat: repeat-x;
margin-bottom: minus its height; <-- this will make everything below this div get ontop the div
}
After some mathematical thinking and experiments, the line of code below did the magic. I had to also watch where to cut it off with -1530px. Make sure you use the same background you used with the body tag.
html {
background: url(images/bg.png) repeat 0px -1530px;
}
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;
}
Is there a way to precisely position a background image with CSS? Code:
.content h2.productSpotlight {background:url(/images/spotlight.jpg) no-repeat; padding-left: 35px;}
I want to be able to move the image around so its more flush with the H2
Thanks
Yes, you can give an offset position for the background property, for example:
background: url(/images/spotlight.jpg) no-repeat 10px 5px;
This will shift the background image 10px from the left corner and 5px from the top. You can also use negative values to shift in the opposite direction.
sure, the background properties include background-position. You can specify it separately as
background-position:20px 20px;
or as part of the combined syntax like
background:url(/images/spotlight.jpg) no-repeat 20px 20px;
See the reference at MDC.