PDA

View Full Version : CSS Help with background command


kev
February 13th, 2010, 02:36 PM
Hi all, it's been along time since i used CSS, but i am using again for a project, this is so basic, but can't remember.

I have a background image that i want to stretch across the browser window, but none of the commands in Dreamweaver do what i want, here's the code:


margin: 0;
padding: 0;
font-family: arial, helvetica, geneva, verdana, sans-serif;
font-size: 62.5%;
color: #636363;
background: #fff url(../images/beach-background.jpg) repeat; /* Background wash */
text-align: justify;

It's on repeat by default, if i choose center it puts the image in the center and repeats again behind???

This is an example of what i want to achieve - http://www.bmstravel.com/

Any help much appreciated
actionAction
February 13th, 2010, 02:42 PM
View-source and/or Firebug are your friend:


img#bg {
height:100%;
left:0;
position:fixed;
top:0;
width:100%;


}
kev
February 15th, 2010, 10:29 AM
Thanks, sorry for the late reply, been out of the country.

So, with he code above what do i do with it, does it replace any other code? as i have tried and nothing happens :) Told you it had been a long time.

Thanks
actionAction
February 15th, 2010, 12:06 PM
I don't know anything about your code except that you have those 7 lines, presumable within a css selector. The code I posted is directly from the site you posted, it applies to an image to set the image to have 100% height and width, be 0 pixels from the top and left edges and to be in a fixed position (things can scroll over the top of it and it stays fixed).


height:100%;
left:0;
position:fixed;
background: #fff url(../images/beach-background.jpg);
top:0;
width:100%;

That could work, but I don't know anything about your code so it might not. Alternatively, revisit the link you posted and examine the site using Firebug (http://www.google.com/url?sa=t&source=web&ct=res&cd=1&ved=0CAkQFjAA&url=http%3A%2F%2Fgetfirebug.com%2F&ei=4n55S-bxDJLANrinuLQH&usg=AFQjCNGT1rhhsYGPQx5Vr5A8RvhIgdSp9g).

Cheers
Dj-Studios
February 15th, 2010, 01:16 PM
If your talking about the very back image on the site do that in the body:



body {
margin: 0;
padding: 0;
blah
blah
background: #ffffff (url/to/image.jpg) repeat;
}


Also try to never use just 3 letters or numbers for your color.
actionAction
February 15th, 2010, 01:24 PM
Also try to never use just 3 letters or numbers for your color.

why is that?
kev
February 15th, 2010, 02:28 PM
Thanks guyz, but which ever way i do it, it does not work :(

I can get the repeat to work, but that looks messy, i want it stretch across like in the link i posted.

The code is from a friend, so not sure what else could be stopping this happening.

Just wondering should this work locally or will i only see it when live? Also why is the commands not in the page properties of dream weaver, does the CSS overide those settings?
Dj-Studios
February 15th, 2010, 03:07 PM
Because some browsers don't actually like it that way and won't even show the right color. My recent project that I did I accidentally did it that way and Chrome for sure just showed white instead of the color I wanted.

Also I think it's just good practice.

Off Topic:

How do you use the off topic thingy you used in your post?
Dj-Studios
February 15th, 2010, 03:23 PM
Yes CSS will override the settings. Just remember it like this:

Web development is like a writing a book. Your html page is your cover. Anything loaded into the page is considered either different chapters or pages in the book. If a character says one thing at the beginning but says the complete opposite later that means the latter comment overrides the characters former comment.

Now that I know what your actually trying to achieve I might be able to help you better.

The only way to do this is make sure html and body is 100% width and 100% height. Then do:



<body>
<img src="your/image/here.jpg" alt="whatever" id"bg" />
</body>


Once that is done your css should be like this



img#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


This CSS grabs the id of your image which is "bg". So any image with id "bg" will be stretched 100% both ways.

Then put your content below that image. So...



<body>
<img src="your/image/here.jpg" alt="whatever" id="bg" />
<div class="divName">Your Content</div>
</body>


Now in order for the content to show up instead of being hidden by the image you must set the main div to a z-index of 1.

So...



.divName {
z-index: 1;
}
actionAction
February 15th, 2010, 07:39 PM
How do you use the off topic thingy you used in your post?

put ot in square brackets to get the off-topic thing.


&#91;ot&#93;shenanigans&#91;/ot&#93;

I don't think you are correct about hex shorthand, it is a part of the css2 spec (http://www.w3.org/TR/CSS2/syndata.html) and is a simple way to expand repeating pairs (e.g. #ff0 expands to #ffff00, #dae to #ddaaee)

According to Wikipedia (http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Web_technology_support) , which can be wrong: chrome fully supports CSS2. It could have been an issue with a conflicting style or an early build of chrome
kev
February 16th, 2010, 09:03 AM
Thanks dj-studios!

I have a working in a brand new web page, but can't get it to work in the sample file i have, which i want to use. - Driving me mad, know i know why i stuck to print LoL
Dj-Studios
February 16th, 2010, 05:11 PM
Can't tell what the problem is without any code...
kev
February 17th, 2010, 04:32 AM
Thanks, can i pm you the zip file?