In my CSS I am placing a background like so,
background:url(/media/images/body-background.png) bottom left repeat-x;
The is a gradient that runs from white to grey, and I am wanting it start at the bottom of my <body> and repeat across the screen, however in IE it seems to sit no where near the bottom of my body, is there any reason for this?
URL - http://apigroup.factoryagency.co.uk
Sico87Just because you are dealing with IE I would avoid doing short hand css, I haven't used it too much but in the past this was an issue with IE. Also, while looking at your site I notice you are giving the body a height of 100%, this might be unnecessary, remove the body height Then try this:
body {
background-image: url("/media/images/body-background.png");
background-position: left bottom;
background-repeat: repeat-x;
font-family: Arial,Helvetica,Tahoma,sans-serif;
}
I hope this helps.
By the way, nice job with the site design ;)
You could try changing the order of the values like this:
background:url(/media/images/body-background.png) repeat-x left bottom;
Related
How can I use background-repeat with multiple images? The primary background image is static and only sits at the top of the unscrolled page.
Once the user starts to scroll down on longer pages, there is a secondary background image than blends in with the first image.
This image repeats infinitely (if necessary) for long pages.
How can I do this?
This is what I have tried:
background-image:
url(../images/background/large/static.png),
url(../images/background/large/repeat.png);
background-repeat:
no-repeat,
repeat-y;
background-position:
0px top,
600px top;
The static.png background page is on top and displays from 0 to 600px. The repeat.png then starts at 600px and keeps repeating down to infinity if necessary. The static page should only display once at the very top. Any suggestions? Thank you!
I think one big problem is, background-repeat is only applied once and to both images.
Got everything working. The issue was with the background-position. I did not understand the syntax. 600px from the left and align to the top is what it says in the above example. I thought its meant 600px from the top. When I tried using the real number it was putting the image way off the screen at right making it feel like it wasn't working. I understand the syntax now and all is working perfectly. Thanks!
background-image:
url(../images/background/large/static.png),
url(../images/background/large/repeat.png);
background-repeat:
no-repeat,
repeat-y;
background-position:
left top,
left 600px;
I'm trying to align a image to position at the bottom of the website, however, it aligns at the bottom of the browser and therefore leaves a gap when scrolling down.
Here's current code:
.pbg{
background: #e1feff url("http://d.cjshort.co.uk/img/mountains.png") no-repeat;
background-position: center bottom;
}
Thanks in advance.
By default browsers apply margin to the tag, that might be causing the gap you're seeing at the bottom of the page. You can do something like body { margin: 0; } or use a full-fledge css reset.
But like others have said, it's not super clear exactly what the problem you're having is.
I've got a big issue concerning the background of my header.
I've been tweaking the site for a few hours in IE, since the page is perfect in every other browser, however old they may be. But i'm totally losing my mind on IE 8, since my header-background (a .gif) simply won't repeat itself ONLY horizontally.
As said before, it's great in every other browser, even IE6,7 and 9, but in IE 8 the background just pastes itself over the whole site.
the css:
header{
position:relative;
height:615px;
background:url(/images/1paage-header-bg.jpg) repeat-x center top;
width:100%;
min-width:950px; }
I'd appreciate a little help here...
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ImagePath',sizingMethod='scale');
background-repeat: repeat-x;
It's working in Internet Explorer 6.
Seeing how you've structured your site would definitely help.
But, often what is used for horizontally repeating header background is body.
http://jsfiddle.net/KMQJd/
Little clarification: Usually body is used if you are already using some sort of background image in html ( which i kinda asumed here.. ) But if you just have a background color and you want to use repeating image at top you should use html - html { background: #777777 url(image.jpg) repeat-x top left; }
I wonder if its the order of your position as first should come vertical and then horizontal.
background: url(image.jpg) repeat-x top center;
I have had the same problem, just check the syntax in IE8 every space is important, also check in firebug if the image loads? My bad syntax was:
background: #fff url(../img/bg_02.png)repeat-x top center;
correct one:
background: #fff url(../img/bg_02.png) repeat-x top center;
in my case the space was the problem. the top and center parameters are obsolete.
Repeat x does not work in IE 8. There no other alternative though
http://reference.sitepoint.com/css/background-repeat
Try setting background-repeat to repeat-x like this:
background-repeat:repeat-x;
When I use gradients, with little content, the gradient repeats, how can I prevent that?
http://jsfiddle.net/mcqpP/1/
I can try using html { height: 100%; }, but when my content requires scrolling ... the gradient repeats
http://jsfiddle.net/mcqpP/3/
How can I fix this
You need to set percentages on the CSS gradients, not absolute pixels. And as long as you only care about modern browsers (i.e. you don't care about IE6) then I suggest you stay away from images, the CSS works fine.
I'm pulling my answer from the answer to this question that I wish I could upvote 100 times:
How to get a vertical gradient background to work in all browsers? That accepted answer has everything you need with full cross browser compatibility.
Here's where I took your example and made it work: http://jsfiddle.net/HJvpf/1/
body {
background: -moz-linear-gradient(top, red 0%, blue 100%);
background: -webkit-gradient(linear, left top, left 100%, from(red), to(blue));
}
Oh and in your 2nd jsFiddle link, the reason it was repeating the gradient is because you set height 100% on html but the gradient was on body. You move that height: 100%; to the body and it works fairly well, but as you can see in my solution you don't need to specify height at all.
Edit: So you don't want it to repeat, but you also don't want it to take up the entire height. Just set repeat-x. http://www.w3schools.com/css/pr_background-repeat.asp
body {
background: -moz-linear-gradient(top, red, blue) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
To have the bottom gradient color fill the rest of the space:
body {
background: blue -moz-linear-gradient(top, red, blue) repeat-x;
background: blue -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
Why not render your gradient out as an 1px-wide image and use something like the following:
body {
background-color: #fff;
background-image: url("images/background.jpg");
background-position: center top;
background-repeat: repeat-x;
}
Setting the background-repeat value will help you control how the background... repeats. In this case it would be rendered as a solid band across the top.
http://www.w3schools.com/css/pr_background-repeat.asp
Also, using an image should work across all browsers, whereas the moz-gradients could be problematic. The image method above should render very predictable results across all browsers.
I had the same problem but realised that it made sense and so just accepted the scrolling / repeating gradient. You could set a fixed height, not %, but to ensure that the gradient didn't repeat you would need to set the height as bigger than anybody's screen who wants to view it. And you don't know what resolutions people have. My advice is to just leave it.
On Yahoo.com, I really like the light gray body gradient background. (Just the gray fade)
However, I can't find the image they use to great this effect.
Does anyone know what image/code Yahoo uses to create this background effect?
It's the image: http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png
If you look at the CSS you'll see:
background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png);
background-repeat: repeat-x;
Which is what everybody else is pointing out. However, the part that nobody else has pointed out is that there is also:
background-position: 0px -2335px;
Which defines an offset so that the background you see doesn't actually start till way down the image.
The gradient that is shows is white to grey, then transparent. In order to make the gradient in this manner you have to set the color of the page equal to the last extent of the gradient. So if you look in that CSS you'll also see:
background-color: #E8EDF0;
This completes the gradient you currently see on yahoo.com.
I have also confirmed that #E8EDF0 is the correct hex code for the last non-transparent color on that background image.
in your image app, make a gradient that starts very slightly darker then it ends
Have a look at the Style on the HTML element using something like FireBug or Chrome's Inspect Element or even IE's Developer stuff.
Also a good thing that a lot of beginners don't understand is that you create a gradient image that's for example 100px tall by only 10px wide. then you just use a css style like this:
body { background:
url('backgroundImage/png') repeat-x; }
The repeat-x repeats the image horizontally.
Current yahoo background has the following CSS property
body{
background: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20110124.png) left -2335px repeat-x; /*unsupported fallback*/
background: -moz-linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Firefox*/
background: linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Standard*/
background-color: #dce2e7;
background-attachment: scroll;
}