css and positioning images repeating

P

Peter

Hi, apologies if this is not the correct group. I'm new to this and
alt.html seemed the most active relevant group that I looked at.


Here is my problem. I have a single line in a browser window and I
would like to display at least two images next to each other. The first
image "1.bmp" contains a graphic. The second image "2.bmp" is just the
background of "1.bmp" that I would like to carry on to the right
margin. The second image "2.bmp" is the same height as "1.bmp" but it
is very narrow. So in the browser the images would be displayed
"122222222222222222" with "2", which is "2.bmp", repeating to the right
hand margin.


This is what I have working so far/the html code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />

<style type="text/css" media="screen">

body
{
background: white url("2.bmp");
background-repeat: repeat-x;
}

</style>
</head>

<body>
test<br/>test<br/>test<br/>test<br/>test<br/>test
</body>
</html>



"2.bmp" repeats over and over for the entire line in the browser window
which is what I want. I can't find out how to put in "1.bmp" at the
left hand side though? I think I could do this by putting "1.bmp" in a
table column and putting a very wide "2.bmp" in another column. But
this feels cowboy, my code will be reviewed, and I want to do it
correctly anyway. I would appreciate some help if you can.

Thank you
Peter
 
J

Jonathan N. Little

Peter said:
Hi, apologies if this is not the correct group. I'm new to this and
alt.html seemed the most active relevant group that I looked at.


Here is my problem. I have a single line in a browser window and I
would like to display at least two images next to each other. The first
image "1.bmp" contains a graphic. The second image "2.bmp" is just the
background of "1.bmp" that I would like to carry on to the right
margin. The second image "2.bmp" is the same height as "1.bmp" but it
is very narrow. So in the browser the images would be displayed
"122222222222222222" with "2", which is "2.bmp", repeating to the right
hand margin.

First of all Peter do not use BMP format for images on the web (BMP is
for Windows format fro use on your own hard drive not the Web) Use JPG,
GIF and maybe PNG.

The background is easy

<style type="text/css" media="screen">
body {
background: white url(MyBackground.jpg) repeat-x;
}
</style>

Then all you have to to is have your featured image in an image element

<body>
<img src="MyFeaturedImage.jpg" alt="The picture">
...
rest of your page...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,043
Latest member
CannalabsCBDReview

Latest Threads

Top