html {
background: #9c9c9c url(../images/bg-bottom.jpg) center top;
}
body {
border-top:2px solid #fecd2a;
background:#9c9c9c url(../images/bg.jpg) repeat-x center bottom;
}
I need bg.jpg which is the large background with the black gradiantat the top, to be at the top and for the bg-bottom.jpg to be repeated at the bottom. How come this doesn't work, is there and easier way? Apart from creating one long image.
http://fluroltd.com/clients/harveys/latest-news/
Looks like you need to switch around your positioning and use a transparent background for the body tag:
html {
background: #9c9c9c url(../images/bg-bottom.jpg) center bottom
}
body {
border-top:2px solid #fecd2a;
background: transparent url(../images/bg.jpg) repeat-x center top;
}
Your CSS on the body should be
background: url("../images/bg.jpg") repeat-x scroll #9C9C9C;
I don't think adding a background to your HTML tag is going to get you anywhere. If I were you I would just make one super long, narrow-width image that will not possibly be exceeded by the length of your page. You can't have multiple BGs without using CSS3, which I personally wouldn't recommend.
Related
I need to figure out how to overlay an image of my logo on top of another repeating image that is being used as a background for the nag bar at the top of my site.
The CSS for the nag bar image looks like this:
.header {
background:url(../images/bg-header.jpg) repeat-x;
height:125px;
is there a way to add another image on top of this and have it aligned to the left side of the underlying image?
Something like this?
http://jsfiddle.net/aJEwZ/
<style>
.nav {
background: url(http://www.psdgraphics.com/file/light-wooden-background.jpg) repeat-x;
height: 250px;
width: 500px;
border:1px solid black;
}
img {
padding:20px;
}
</style>
<div class='nav'>
<img src="http://a.deviantart.net/avatars/h/a/haz-elf.jpg?1" />
hello</div>
Here you go.
here's a DEMO
and here's the CODE
Here's the css
.header {
background: url("http://fc04.deviantart.net/fs70/i/2013/266/7/3/sydneigh_logo_by_robberbutton-d6nmaox.png") top left no-repeat ,url("http://subtlepatterns.com/patterns/sandpaper.png") repeat-x;
background-size: 571px 125px, auto;
height:125px;
width: 100%;
}
notice how the background attribute has two shorthand backgrounds with images written out seperated by a comma. The first image is on top of the second image and so on.
The first property of attribute background-size only applies to the first property in the background attribute (the first image in the declared background attribute.) The second applies to the second image in the background attribute.
This works the same way with other background-properties such as background-repeat, and background-image.
Here's an article on having multiple background images:
http://www.css3.info/preview/multiple-backgrounds/
I have wordpress site, and i want change background, and i need two images to background
Example:
http://i.imgur.com/8HMY8al.png
I want it to body, code is now that:
body {
background: #fff;
color: #494949;
font-family: Arial,Trebuchet MS,Helvetica,sans-serif;
font-size: 12px;
line-height: 18px;
background: url(images/bg1.png) top left repeat-x #D3D5D4;
}
What i need add here?
i think bg2 need to fit to screen (site)
Seperate it into two div and apply different background for each div
You can set seperate background to html element and seperate one to body element.
With CSS3 tricks, you can apply multiple background to only one div. See this example :
body{
background:url(images/img.gif) no-repeat left top,
url(images/img.gif) no-repeat right top,
url(images/img.gif) no-repeat left bottom,
url(images/img.gif) no-repeat right bottom;
}
Careful with browsers compatibility. Hope it helped ;)
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've a webpage with a background image that needs to be kept sharp and in focus.
The problem is that to achieve that it obviously has to have a set size every time.
I need a way of filling in the remaining space (which will vary from screen size to screen size) with black.
The easiest way to see what i'm talking about is if you go to the webpage: (no self promotion meant)
http://hopeish.com
Particularly if you are using chrome and firefox - as safari is okay and IE isn't being affected in the same way
Any ideas how I can do this??
background: url(image.jpg) #000 no-repeat;
background:#000 url(image.jpg) bottom right no-repeat;
this way your picture will be at the bottom right and the rest will be filled with black.
You currently have:
body {
background: url(image.jpg);
background-repeat: no-repeat;
/*background-attachment:fixed;*/
}
Add background-color: black; to have a full black background.
body {
background-color: black;
background: url(image.jpg);
background-repeat: no-repeat;
/*background-attachment:fixed;*/
}
Or use the shorthand background property variant seen in the other answers.
http://reference.sitepoint.com/css/background
Achievable with simple CSS.
body {
background: url('http://hopeish.com/image.jpg') no-repeat top right black;
}
Here's a live example
Snippet of my CSS:
#wrapper div.box {
background: url('box-bg.png') left top repeat-y;
}
#wrapper div.box h2 {
background: url('box-top.png') left top no-repeat;
}
That doesn't work. Instead of a transparent image it displays the image but with white space in place of transparent background.
If I do:
<img src="box-top.png" alt="" />
The transparent image shows up correctly. What's casuing this problem?
Have you tried explicitly giving the elements a "background-color: transparent"?
I agree with Pekka - Is it possible those HTML elements are inheriting a white background color from another CSS rule? You may want to try:
#wrapper div.box {
background: transparent url('box-bg.png') left top repeat-y;
}
#wrapper div.box h2 {
background: transparent url('box-top.png') left top no-repeat;
}
May I ask what browser you are using? IE6 doesn't display PNGs correctly. Also, how are you creating your PNG? If it's Photoshop, make sure you do a Save as Web... or it will not display correctly (transparency issue).