Yes I know this should be simple but I cannot get it bloody working :/
HELP !?!?!?
<HTML>
<HEAD>
<STYLE>
div.background
{
url(http://www.thefitbox.co.uk/userimages/Bootcamp%20page.jpg) no-repeat;
width: 300px;
height: 250px;
border: 2px solid black;
}
div.transbox
{
width: 100%;
height:50px;
margin:0px 0px;
background-color:#000;
border:1px solid black;
/* for IE */
filter:alpha(opacity=70);
/* CSS3 standard */
opacity:0.7;
}
div.transbox h2
{
margin:5px 5px 5px 5px;
font-size: 32px;
font-weight:bold;
text-align: center;
color:E3E022;
}
</style>
</STYLE>
</HEAD>
<BODY>
<div class="background">
<div class="transbox">
<h2>BOOTCAMP</h2>
</div>
</div>
</BODY>
</HTML>
Fixed it.
div.background
{
width: 300px;
height: 250px;
border: 2px solid #000;
background-image: url(http://www.thefitbox.co.uk/userimages/Bootcamp%20page.jpg);
background-repeat: no-repeat;
background-position: center center;
}
I can see that this is going to be an uphill struggle :)
You can make that a lot cleaner mate..
div.background
{
width: 300px;
height: 250px;
border: 2px solid #000;
background: url(http://www.thefitbox.co.uk/userimages/Bootcamp%20page.jpg) no-repeat 50% 50%;
}
Also - NEVER do spaces, change that with a - instead as you can see you get %20. %20 causes sooo many problems you will start running into.
No spaces for web stuff basically, urls, file names, folders - no capitals or space.
Agree with everything Liam said. lowercase_filenames_with_underscores.jpg is the way to operate, it will save you headaches later!
It's much easier using shorthand for background related CSS:
background: #ff0000 (images/filename.jpg) no-repeat scroll left top;
that will set a red background (for no color replace #ff0000 with just the word transparent), then applies the filename.jpg image on top without it repeating (or use repeat, repeat-x or repeat-y), scroll means when you scroll it moves up and down on/off the screen - fixed would make it fixed (good for a page background) - finally left and top and position the image to the very left and very top of the container. Liam's 50% 50% is the same as replacing left top with center center. It doesn't make much difference if you use the words, percents or px/em, whatever is easiest for you.
If you already knew all that apologies if it sounds patronising :D
Transparent if you just want background image and the parent div already is using a background colour you want to use and if using a semi or transparent background image.
Don't worry about the space thing, that was purely as I was using the image from their existing site. I learnt years ago not to have anything funky in the path :)
I did start off trying the shorthand CSS, I stopped when I started reading conflicting argument lists. At that point, seeing as I was trying to debug, I though explicit definitions would be better. I'm just poking around atm, this'll get cleaned up as I move it into the live stream :)
As for the advice. I'm not a complete noob but at the same time I've done nothing with CSS2 or 3, so I'm on a serious catchup curve atm :) My initial reaction to any problem is Javascript, then whilst searching I stumble across a CSS solution :)