CSS Help

[The Boosh!]

I'm trying to learn the very basics of putting a website together, and i'm now onto CSS.

I'm trying to use an image as a back ground.

The image its self is massive.

I want the image to fill the screen in the web browser - BUT I want it to keep its aspec ratio (i.e not just be a massive picture only showing me a section.)

body {
background-position: center top;
background-image: url(images/background.jpg);
background-repeat: no-repeat;  
background-attachement: fixed
}

In essence, you know when you set an image as your desktop backgruond and you can select stretch and it fits to what ever size your screen is?

Thats what i'm attempting to acheive

 

[cava83]

Is it a photo or simply a background?

If a background, make the image as small as possible and then use repeat across the X and Y access.

 

[Jon.G]

put the image in its own div.

image{
background-position: center top;
background-image: url(images/background.jpg);
background-repeat: no-repeat;  
background-attachement: fixed;
width: 1024px;
height: 768px;
}

In the HTML put <div id="image"></div>

Nest everything you want ontop of the image inside the div tag. IE <div id="image">HERE</div>

 

[Jon.G]

If you've not looked at W3Schools, I'd urge you too also. Some great beginner advice and guides there. http://www.w3schools.com/css/

 

[Mr Pants]

Is it a photo or simply a background?

If a background, make the image as small as possible and then use repeat across the X and Y access.

He's stated it's an image, not a background pattern that can be tiled.

put the image in its own div.

image{
background-position: center top;
background-image: url(images/background.jpg);
background-repeat: no-repeat;  
background-attachement: fixed;
width: 1024px;
height: 768px;
}

In the HTML put <div id="image"></div>

Nest everything you want ontop of the image inside the div tag. IE <div id="image">HERE</div>

Would it not be better to use the percentage value rather than pixels. Eg 'width: 100%;'. If you set it to 1024x768 that's not going to cater to all screen resolutions. Tbh I've never played with a large image as a background though so couldn't be totally sure without checking.

 

[The Boosh!]

Yeh i'm working off of w3 schools and trying to put it into practise but I can't get my head around somet things

Its taking me ages to work out how I align text as well

 

[Mr Pants]

In what way are you trying to align text? You would usually just create your divs, and use the float property to position them where you want. Then within the divs you just use your paragraph <p> tags and the text will just align left to right naturally. If you want it to be centered then you'd have to do do something like this:

.boosh {
text-align: center;
}

Then when you go to create your paragraph you use: <p class="boosh">

 

[The Boosh!]

In what way are you trying to align text? You would usually just create your divs, and use the float property to position them where you want. Then within the divs you just use your paragraph <p> tags and the text will just align left to right naturally. If you want it to be centered then you'd have to do do something like this:

.boosh {
text-align: center;
}

Then when you go to create your paragraph you use: <p class="boosh">

Think i've done it! just had to use justify and add a few paragraphs then it moved up the table i'd created.

 

[Mr Pants]

Think i've done it! just had to use justify and add a few paragraphs then it moved up the table i'd created.

You're using tables?? :dapprove::dapprove::dapprove:

 

[The Boosh!]

Well I don't know of any other way to do it! What should I be using?

 

[Mr Pants]

Divs!

 

[The Boosh!]

Can you give me an example of a div. I'm struggling to find one online that I understand

 

[Jon.G]

He's stated it's an image, not a background pattern that can be tiled.



Would it not be better to use the percentage value rather than pixels. Eg 'width: 100%;'. If you set it to 1024x768 that's not going to cater to all screen resolutions. Tbh I've never played with a large image as a background though so couldn't be totally sure without checking.

I just used 1024x768 as an example. Just replace the height and width for the actual height and width of the background image. It will then be displayed in its true resolution. 100% width and height will work as well, but im my experience and for valid coding pixels or em's are better to work in.

 

[Mr Pants]

Can you give me an example of a div. I'm struggling to find one online that I understand

I had a fantastic guide on my old laptop. If I can find it I'll share it with you. I went through the whole thing and afterwards I created a site on my own from scratch and it really helped.

Divs are used for structuring your page layout. So instead of using tables, you use divs if you want say 3 columns for your website. This looks to be a decent read: http://www.yourhtmlsource.com/stylesheets/csslayout.html

A common example is creating a "container". You'll be using nesting here. So you could have:

<div id="container">
<div class="left">(Content here you want to appear on the left hand side)
</div>
<div class="right">(Content here you want to appear on the right hand side)
</div>
</div>

What you need to remember with divs is there must always be an open and a closing div! <div></div> If you fail to do this your page will be fucked, 100% guaranteed!

 

[Jon.G]

Just uploaded this for you. Have a look through them. Please ignor the background image and anything else that looks s**t.

http://jgmediahouse.com/demo/demofiles.html

No descriptions etc but hopefully if you find something that you're after you can kind of just copy and past and play with it till you get what you want.

 

[richo]

#navigation {
position: absolute;
left: 50px;
top: 100px;
}

Thats just an example to use a DIV rather than a table, absolute position does however mean it will appear exactly there on the page.

 

[The Boosh!]

fail... This is harder that it looks.

visual basic for applications is a lot simpler

 

[Mr Pants]

It's not hard mate. HTML/CSS are pretty easy really. You just gotta get stuck in. You learn by doing.

 

[Jon.G]

This is a good example from my work:
http://jgmediahouse.com/demo/SCL4/Printing/sitedemo.html
http://jgmediahouse.com/demo/SCL4/Printing/sitedemo-screen.css

The Yellow, Red, Pink and Light Blue are all INSIDE the dark blue div.
Yellow is 100% width of the dark blue div
Red is floated left at a set pixel width
Light Blue is floated right at a set pixel width
Pink is centred with a set pixel width.

Thats a good base for a basic website.

 

[The Boosh!]

This is a good example from my work:
http://jgmediahouse.com/demo/SCL4/Printing/sitedemo.html
http://jgmediahouse.com/demo/SCL4/Printing/sitedemo-screen.css

The Yellow, Red, Pink and Light Blue are all INSIDE the dark blue div.
Yellow is 100% width of the dark blue div
Red is floated left at a set pixel width
Light Blue is floated right at a set pixel width
Pink is centred with a set pixel width.

Thats a good base for a basic website.

Excellent that should give me something to mess around with.

the site is just for my mate who's got a cottage in scotland he wants to start renting out. Does deer stalking etc - only needs to be v v v basic.

 

[Mr Pants]

It's better to learn from the ground up though even if it's only just a basic site. You might want / need to do more stuff in the future and it's good to know how to do stuff.

That's a good example from Jon for you to look at and work it all out.

Notice the left and right sidebar's are divs using the float property. That's why CSS is so much better than table due to the flexibility. Where I used container earlier, this uses a wrapper. It can be called anything though. The main content div doesn't need to use the float property as the sidebar's are floating left / right of the main content div. The main content just needs the margin-left and margin-right values to ensure the sidebar's don't overlap.

 

[Alex H]

Might be worth checking out Blueprint CSS. Does most of the hard work for you