Author Topic: Div.background CSS property problem :s (Read 1215 times)

Mardoni · **on:** August 24, 2011, 00:01:54 AM

Div.background CSS property problem :s

on: August 24, 2011, 00:01:54 AM

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>

Mardoni · **Reply #1 on:** August 24, 2011, 00:18:09 AM

Re: Div.background CSS property problem :s

Reply #1 on: August 24, 2011, 00:18:09 AM

Fixed it.

Code: [Select]

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

neXus · **Reply #2 on:** August 24, 2011, 00:23:56 AM

Re: Div.background CSS property problem :s

Reply #2 on: August 24, 2011, 00:23:56 AM

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.

Clock'd 0Ne · **Reply #3 on:** August 24, 2011, 01:08:20 AM

Re: Div.background CSS property problem :s

Reply #3 on: August 24, 2011, 01:08:20 AM

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

Last Edit: August 24, 2011, 01:10:08 AM by Clock'd 0Ne #187;

neXus · **Reply #4 on:** August 24, 2011, 03:02:50 AM

Re: Div.background CSS property problem :s

Reply #4 on: August 24, 2011, 03:02:50 AM

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.

Mardoni · **Reply #5 on:** August 24, 2011, 14:20:17 PM

Re: Div.background CSS property problem :s

Reply #5 on: August 24, 2011, 14:20:17 PM

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

News:

Author Topic: Div.background CSS property problem :s (Read 1215 times)