PDA

View Full Version : How to make an image repeat using css?


twilightballoons
12-08-2007, 12:59 PM
I have been working with Dreamweaver and oscommerce to set up a website selling balloons etc, and need a bit of help again!

First, I tried to make a site using the templates that come with dreamweaver like the 3 colmn liquid, now when I test that on my machine it works great, but when I upload it to my server it just pastes left even when I have linked to the stylesheet and uploaded to the right folder?

Secondly, I made a rigid design in photoshop which is OK but I have a slight problem. I would like to keep the site the width it is, but have the site expand up or down to fit the content. I know that If I make a slice of 1pixel width, that I need to set it to something so that it gets repeated, but I dont know how to do this using css?

Can anyone help as it is starting to bug me now!!!!

lux
12-08-2007, 02:38 PM
please post a link to your site if its live

follow this link to see how to repeat an image:

http://www.w3schools.com/css/pr_background-repeat.asp

twilightballoons
12-08-2007, 02:58 PM
The link to my site is : http://twilightballoons.co.uk (http://twilightballoons.co.uk/)

I have an idea of what I need to do now.

What I want to do is make a small image of the main area box and have that tile vertically as items are entered or removed, thus moving the box up or down. I have been searching all over and found how to do it with the background image, but not with the box image?

Any advice is great thanks.

lux
12-08-2007, 03:52 PM
if you already use firefox then you can install the web developer extension found here: https://addons.mozilla.org/en-US/firefox/addon/60

once installed click on the CSS tab in the web developer toolbar and select View Style Information or the keyboard shortcut to use is Ctrl + Shitf + Y.

You can then view all the information about the main area by hovering over the area and then selecting it with a red border appears.

From there you can easily find the code that you need to alter to create your desired effect.

Hope this helps.

twilightballoons
12-08-2007, 04:20 PM
Thanks for the reply lux.

Unfotunetly it is still not helping me! I am new to using css so its a bit of a struggle!

I know exactly what I want to do and how to slice it but dont know how to code it using css. I want to take a slice from left to right which will include the main white content area, then tell css to tile that image vertically whenever the content expands etc.

Basically, all I want it the content box to expand up and down! Been searching everywhere and still no nearer to the answer.

lux
12-08-2007, 04:42 PM
this is the css to repeat an image vertically

#my-div{
background-image: url(http://www.example.com/gradient.gif);
background-repeat: repeat-x;
}

taken from: http://www.tizag.com/cssT/background.php (bottom of the page)

lux
12-08-2007, 04:43 PM
oops that horizontally change x to y

twilightballoons
12-08-2007, 04:54 PM
Thanks for the reply lux, forgive me for being slow!!!

I take it I put:

#my-div{
background-image: url(http://www.example.com/gradient.gif); (http://www.example.com/gradient.gif%29;)
background-repeat: repeat-x;
}

in the stylesheet replacing the url with the image that is going to be tiled?

What do I need to put into the dreamweaver page to make the image link? Is there a div tag I need to put in and do I place that just before the image, or before the whole table??

Thanks for the help, and I told you I am new to css so a bit slow!

Cheers.

twilightballoons
12-08-2007, 04:57 PM
I tried it out with a box I made in photoshop and tried to make the middle part tile. There are only three parts to the box, top middle and bottom:

<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Untitled-1) -->
<table id="Table_01" width="500" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/grey1.jpg" width="500" height="230" alt=""></td>
</tr>
<tr>
<td>
<img src="images/grey2.jpg" width="500" height="71" alt=""></td>
</tr>
<tr>
<td>
<img src="images/grey3.jpg" width="500" height="199" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

This is the stylesheet with the info you said added, but I am sure I have done something wrong!!

@charset "utf-8";
/* CSS Document */

body{

#my-div{
background-image: url(images/grey2.jpg);
background-repeat: repeat-x;
}

}

Can you tell me where I have gone wrong? Sorry to be a pain and I am grateful for your help.

lux
12-08-2007, 05:16 PM
try this:


<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
@charset "utf-8";
/* CSS Document */

.repeat-image{
background-image: url(images/grey2.gif);
background-repeat: repeat-y;
}

</style>

</head>
<body>
<!-- ImageReady Slices (Untitled-1) -->
<table id="Table_01" width="500" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/grey1.jpg" width="500" height="230" alt=""></td>
</tr>
<tr>
<td class="repeat-image">
<p>Some page content</p>
<p>Some page content</p>
<p>Some page content</p>
</td>
</tr>
<tr>
<td>
<img src="images/grey3.jpg" width="500" height="199" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

domedia
12-08-2007, 08:18 PM
twilightballoons, you need to know the very basics of how CSS works before you expect to do anything with it. If you don't know what a CSS class or CSS ID is, you need to get back the reading a starter tutorial or the DW manual on CSS. If someone just gives you the code and you don't know what it means, but *somehow* make it work, you've learnt nothing and must come back here for code to cut and paste next time as well ;-)
I tried it out with a box I made in photoshop and tried to make the middle part tile. There are only three parts to the box, top middle and bottom:

<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Untitled-1) -->
<table id="Table_01" width="500" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/grey1.jpg" width="500" height="230" alt=""></td>
</tr>
<tr>
<td>
<img src="images/grey2.jpg" width="500" height="71" alt=""></td>
</tr>
<tr>
<td>
<img src="images/grey3.jpg" width="500" height="199" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

This is the stylesheet with the info you said added, but I am sure I have done something wrong!!

@charset "utf-8";
/* CSS Document */

body{

#my-div{
background-image: url(images/grey2.jpg);
background-repeat: repeat-x;
}

}

Can you tell me where I have gone wrong? Sorry to be a pain and I am grateful for your help.

twilightballoons
12-12-2007, 01:49 PM
Can anyone tell me how to use multiple background images?

I am going to use a deamweaver layout, but I need to multiple images on the site but no tsure how to do it? I can layout single background images easily but struggle when it comes to multiple backgrdoun images?

Cheers

d a v e
12-12-2007, 02:22 PM
set backgrounds on individual divs
(like 1 per div)

twilightballoons
12-12-2007, 05:53 PM
Thanks for the reply Dave.

I am now trying to get the hang of background images using css, but have hit another problem!

I wish to have three background images that will make up my header, one image to the left, one image to the right and one set to repeat which will fill the header.

Now, I have set the repeat image and that works fine and when I set another <div> and set another background image it automatically sits left which is fine, but when I come to position the other image to the right it just sits left and will not move.

I have looked through all the tutorials but not sure why it will not move left. I can make text move left, right and center but not an image?

Cany anyone help??

Here is the css for just one image I am testing with.

.image1 {
background-image: url(images/button-home1.jpg);
background-repeat: no-repeat;
height: 25px;
width: 132px;
text-align: right;
top: auto;
background-position: right center;
}

d a v e
12-12-2007, 06:02 PM
how about the repeating one as the background, the one on the left as a left aligned image (not background) and the right image as right aligned (through css of course) or floated

why 3 images anyway?

twilightballoons
12-12-2007, 06:19 PM
I am trying to think of the best design that I can that I can use as a template for my site that is using css.

I thought that the best design would be a flexibile design so everything would need to be flexible. So, each element would have to be flexible and in my header there are a couple of elements!

Would it be best to uses a flexible design or stick to a 800 width fixed design? If I use a fixed width then I can just insert my header into the header in the page via css as it is 800 width.

I was trying to make a flexible box to put my oscommerce text in but cant find anything to tell me exactly how to do it.

Cheers.

twilightballoons
12-16-2007, 04:38 AM
Right, I have finally settled on a design but need a little help to finish it off.

I have used the dreamweaver 2 column liquid layout and added to it which I am happy with, but with one flaw. The sidebar on the left hand side does not stretch all the way down when the layout stretches, it stops and so leaves a white gap between it and the footer. I have the main content as white and the sidebar as light blue and want to the sidebar to always be level against the footer.

I have tried changing the settings on the stylesheet but to no avail.

Can anyone tell me where I am going wrong?

The web address is : http://www.twilightballoons.co.uk (http://www.twilightballoons.co.uk/)

The css on the sidebar is: .twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 150px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
background-color: #97DEFE;
background-repeat: repeat;
height: 200px;
}

The height is set to 200, but this does correct the problem, and when I have set the height to 100% and auto it does not sort out the problem.

Cheers for any help.

twilightballoons
12-17-2007, 10:11 PM
Can anyone help me in regards to the above post??

I want to make the sidebar always touch the footer but no matter what I put it does not. It is floated left and I have tried making the height 100% and clearing the height, but the sidebar still only stretches as far as the text when I want it to fill the area all the way down to the footer.

I really need some help as I have run out of ideas how to fix it??

The site address to check out what I mean is: http://www.twilightballoons.co.uk (http://www.twilightballoons.co.uk/)