I am trying to use a body background image which is center aligned, but it does not work in IE 6. The CSS for the body is
body{line-height: 160%;font-family: "Trebuchet MS", sans-serif; font-size: 80%;
/* background: #000a28 url('img/main_bg.png') no-repeat center top;*/
background-image:url('img/main_bg.png');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center top;
background-color: #000a28;
width: 100%;
margin: 0 auto;
color: #ffffff;
text-align: center!important}
For IE 6 I wrote the following CSS
body {
text-align:center;
}
#main-wrapper {
margin:0 auto;
width:960px;
text-align:left;
}
Please help me.
The reason why it's not working is because of the SuperSleight transparent png script you are using. Because the script runs only after everything's loaded, the background first centers, then jumps back to the left when the script runs. As far as I'm aware, AlphaImageLoader does not allow for background position to be changed.
Try using this script instead: http://www.dillerdesign.com/experiment/DD_belatedPNG/. It uses a different solution which should allow for background-position to be used.
Try my code instead of your body's properties
body{
background:url('img/main_bg.png') #000a28 no-repeat center top;
color: #ffffff;
font-family: "Trebuchet MS", sans-serif;
font-size: 80%;
line-height: 160%;
text-align: center;
}
Related
I'm trying to set the background-image-property in CSS.
Here's my Code:
body{
background-color: #2C2F33 ;
background-image: url(https://i.postimg.cc/htbpRQ6f/0f73b4070e4238fe757656ba68e24c44af64c970.jpg);
background-size: cover;
background-attachment: fixed;
font-family: 'Roboto', 'Arial', 'sans-serif';
color:white;
}
Everything is working fine, but sometimes after starting Firefox, the Background-Image won't show up.
It will get loaded, if i'm using Strg+F5.
So the background-image isn't set properly in cache.
Does anyone know how to set it properly?
I shorted and update your code a little bit, It's worked on codepen every time. You could try it, Hope it will solve your problem.
The code:
body{
background: url("https://i.postimg.cc/htbpRQ6f/0f73b4070e4238fe757656ba68e24c44af64c970.jpg"), #2C2F33;
background-size: cover;
font-family: 'Roboto', 'Arial', 'sans-serif';
color:white;
}
Also see from code snippet:
body{
background: url("https://i.postimg.cc/htbpRQ6f/0f73b4070e4238fe757656ba68e24c44af64c970.jpg"), #2C2F33;
background-size: cover;
font-family: 'Roboto', 'Arial', 'sans-serif';
color:white;
}
I want to add a background image on my webpage but when I add in my code it doesn't show the image. The page is linked to the home page but how would I get my background image to appear when the user selects the help guide tab, which it then takes them to another page.
<html>
<head>
<meta charset="utf-8" />
<style>
h1 { text-align: center; font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: 50; }
p.p-stage { text-align: center; font-family: Arial; font-size: 150%; }
p.p-help { text-align: center; font-family: Arial; font-size: 100%; }
body {
background-image: url("assets/images/Festival.jpg");
background-height: 100%;
backgroud-width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
#rcorners2 {
margin: auto;
text-align:left;
border-radius: 25px;
border: 2px solid #000000;
padding: 20px;
width: 1000px;
height: 750px;
overflow: auto;
}
</style>
</head>
<body>
<h1>Help Guide</h1>
<p class ="p-stage" id="rcorners2">Stages:<br><br>1. How to add a stage?<br><br>
To create a stage please do this.................<br><br>
2. How to delete a stage?<br><br>
To delet a stage please do this.................<br><br>
3. Add a help guide with a questions users may come up with and then com up with answers.
</p>
</body>
</html>
Here is my webpage
I fixed the problem. it is due to path of the root directory. To go back in the root directory where the image file might be in use:
background: url("../../assets/images/Wallpaper4.jpg");
the 2 dots go back one folder so two .. means you have gone back 2 folders
I was wondering if anyone could help me regarding centering the table on this webpage:
http://stoltz.caltech.edu/members.html
Specifically, the table containing the photos of each person is off center from the header of the webpage. I've been trying to center it to no avail.
Any help would greatly be appreciated!
I went to your website and did some changes in css now you can try these changes
body {
background-color: #F9F9F9;
color: #231F20;
font: normal 12px/2.4em Verdana, Tahoma, Helvetica, sans-serif;
text-align: center;
margin: 0 -120px;
padding: 0;
}
I have a problem accessing my website with and Android device using Jelly Bean 4.3. The div containing the text is not filled horizontally (less than half of it) but only if text-align is set to left (as it should). If set to center, it is filled but it looks ugly.
This is my h4 CSS definition:
h4
{
text-align: left;
width: 90%;
font-size: 180%;
font-style: normal;
font-family: "Times New Roman", Times, serif;
padding: 10px 40px;
}
Which could be the cause ?
I'm not a real HTML expert but I'm pretty sure it's a bug.
I have no idea why, but if I add a color to background-color it works.
Not transparent, inherit or initial but a real color otherwise it doesn't work. Since the parent div has a
background: -webkit-radial-gradient(rgba(230,230,230,0.7), rgba(240,240,255,0.8), rgba(230,230,230,0.7));,
setting a color makes all look ugly so I added a
background: -webkit-radial-gradient(rgba(230,230,230,0.0), rgba(240,240,255,0.0), rgba(230,230,230,0.0));
to the h4 and it looks perfect, transparent background and div filled with text.
So the h4 is now:
h4
{
text-align: left;
width: 90%;
font-size: 180%;
font-style: normal;
font-family: "Times New Roman", Times, serif;
padding: 10px 40px;
background: -webkit-radial-gradient(rgba(230,230,230,0.0), rgba(240,240,255,0.0), rgba(230,230,230,0.0));
}
I hope this helps someone with the same wierd problem.
I have built a landing page for an external client all is working fine, I have a background image which fits the hole screen, I modified the existing body tag within the bootstrap.css class as follows
body {
margin: 0;
background-image: url('/Content/Images/Danone-Background-New.png');
background-size: 1440px 800px;
background-repeat: no-repeat;
background-size: cover;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
z-index: 9999;
}
Again this works perfectly when running locally, I then publish this site to the hosting environment, and when I navigate to the site all the content is displayed minus the background image, so I first assumed I have the wrong path so I checked the body style using firebug and this is what I see
body {
background-color: #fff;
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857;
}
So for first glance I assumed "Oh that's strange it hasn't copied over my body styles!" so I repeat the process again and low and behold the body style remains as above, So i login to the server navigate through the files to the bootstrap.css find the body tag and again it looks as I expected
body {
margin: 0;
background-image: url('/Content/Images/Danone-Background-New.png');
background-size: 1440px 800px;
background-repeat: no-repeat;
background-size: cover;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
z-index: 9999;
}
Yet the image does not render.
What is wrong with this? I have tried ctrl f5, looked in the development tool bar checked for any 404 erros nothing displayed ? I'm baffled?!
Link to check www.danoneultimate.com.au
In the <head> section of your website, you load a different stylesheet.
<link href="/Content/css?v=WY2Ybti5pBJYm0QfqiFBL2b5U_cKoeAWQC9DALv4mnw1" rel="stylesheet">
Change it so that it loads bootstrap.css:
<link href="/Content/bootstrap.css" rel="stylesheet">
You have edited bootstrap.css but you're loading bootstrap.min.css.
Your code works just fine :)