New at CSS

T

TheApprentice

New Member
Hello, I've started doing some html and scc.

I've been googling throu some sites on the net and could not find anything that worked for me.

What I need help with is very basic, and abit embarrasing.

How do I insert my custom images to my site using SCC?, like a background, and is it possible to have 2 different backgrounds and place one of them left, and another right?


Hope you can help, thanks in advance.
 
Phreaddee

Phreaddee

Super Moderator
Staff member
w3schools.com is a good place to start with learning how to use css.

background images.
you would call it as such from the css

background-image: url(../images/background.jpg);
assuming that your got your styles in one folder and images in another
or
background-image: url(images/background.jpg);
if your styles were just floating around on the root directory, but images still in their own folder
or
background-image: url(background.jpg);
if your styles AND your images were both floating around on the root directory
 
D

DesignerBill

Member
Two backgrounds

One way you could use two background images is to divide your page into two divs, each with its own background image. You would have to style both divs with float-left (hard to understand, but see the "Using floats" sticky post on the Web Design forum first page). Something like this:

<html>
<head>
<style type="text:css">
#leftdiv {
float:left;
background-image:url("leftimg.gif")
}
#rightdiv {
float:left;
background-image:url("rightimg.gif")
}
</style>
</head>

<body>
<div id="leftdiv">
---- left div content ----
</div>

<div id="rightdiv">
---- right div content ----
</div>

</body>
</html>
 
T

TheApprentice

New Member
DesignerBill said:
One way you could use two background images is to divide your page into two divs, each with its own background image. You would have to style both divs with float-left (hard to understand, but see the "Using floats" sticky post on the Web Design forum first page). Something like this:

<html>
<head>
<style type="text:css">
#leftdiv {
float:left;
background-image:url("leftimg.gif")
}
#rightdiv {
float:left;
background-image:url("rightimg.gif")
}
</style>
</head>

<body>
<div id="leftdiv">
---- left div content ----
</div>

<div id="rightdiv">
---- right div content ----
</div>

</body>
</html>
Click to expand...


Hello, I tried writing in that exactly, apart from the "background-image:url("rightimg.gif")"

My folder is on my desktop with the pictures, so would the correct be ("Sccpictures/Smiley") ?

I'm using xampp to make my computer a server, or whatever it does, it was recommended somplaces. But wondering if I need some other program before I can properly use css?

Also to the post 1# I've read throu entire w3schools about it but nothing works. Pretty sure I'm doing a ****up somewhere, but not sure where.
 
D

DesignerBill

Member
More info

Oops, my example did have one error. Change the line:
<style type="text:css">​
to
<style type="text/css">​
.

You are writing SCC, but I think you must mean CSS. :)

You should put your images in the same root folder with your html, or in a new "images" sub-folder like Phreaddee suggested. (you would need a complicated url to point to a desktop folder).

You might need to review XAMPP documentation to find out where to store various files and how to access them in your web browser. Also you need to understand HTML before diving into CSS. w3schools.com also has a good tutorial on HTML.

Here's a revision of my example that worked for me, with two background images of flowers, copied from Windows sample pictures.

<html>
<head>
<style type="text/css">
body {
width:850px;
font-size:48pt;
color:white
}
#leftdiv {
width:50%;
float:left;
background-image:url("csspictures/Tulips.jpg")
}
#rightdiv {
width:50%;
float:left;
background-image:url("csspictures/Chrysanthemum.jpg")
}
</style>
</head>
<body>
<div id="leftdiv">
<p>This text should have the picture of the yellow tulips for the background.</p>
</div>
<div id="rightdiv">
<p>This text should have the picture of the red mums for the background.</p>
</div>
</body>
</html>
 
T

TheApprentice

New Member
DesignerBill said:
Oops, my example did have one error. Change the line:
<style type="text:css">​
to
<style type="text/css">​
.

You are writing SCC, but I think you must mean CSS. :)

You should put your images in the same root folder with your html, or in a new "images" sub-folder like Phreaddee suggested. (you would need a complicated url to point to a desktop folder).

You might need to review XAMPP documentation to find out where to store various files and how to access them in your web browser. Also you need to understand HTML before diving into CSS. w3schools.com also has a good tutorial on HTML.

Here's a revision of my example that worked for me, with two background images of flowers, copied from Windows sample pictures.

<html>
<head>
<style type="text/css">
body {
width:850px;
font-size:48pt;
color:white
}
#leftdiv {
width:50%;
float:left;
background-image:url("csspictures/Tulips.jpg")
}
#rightdiv {
width:50%;
float:left;
background-image:url("csspictures/Chrysanthemum.jpg")
}
</style>
</head>
<body>
<div id="leftdiv">
<p>This text should have the picture of the yellow tulips for the background.</p>
</div>
<div id="rightdiv">
<p>This text should have the picture of the red mums for the background.</p>
</div>
</body>
</html>
Click to expand...

Thanks alot, works for me now :)
 
You must log in or register to reply here.
Top