473,400 Members | 2,145 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,400 software developers and data experts.

css and positioning images repeating

Hi, apologies if this is not the correct group.

Here is my problem. I have two background images I would like to
display next to each other, the second one repeating for the entire
browser window width. 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

Mar 26 '06 #1
1 1892
Peter wrote:
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.


Firstly, don't use bitmap graphics on the Web. They have poor browser
support, and they eat up bandwidth. Use PNG (or GIF or JPEG as appropriate).

Secondly, in CSS 1.0 and 2.x an element can only have one background
image. CSS 3.0 will allow for multiple background images to be attached to
an element, but that's still a way off.

For now, if you want two background images, you need two elements. For
example:

<div id="sea">
<div id="boat">...</div>
</div>

#sea {
background: blue url('water.png') repeat scroll top left;
}
#boat {
background: transparent url('boat.png') no-repeat scroll top left;
}

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Mar 26 '06 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
by: Bryan R. Meyer | last post by:
Hello Everyone, The problem of browser resizing has become an issue for me. While redesigning my webpage, I set the left and right margins to be auto so that my content would be centered. ...
2
by: Stephen Weatherly | last post by:
Could anyone please help me with a problem I am having with my table widths??? If I have 2 images within a td tag, but using CSS relative positioning I position one over the top of the second (I...
4
by: salty_dogs | last post by:
i have a site that works well in ie6 for the pc. but i've also seen it (don't have a mac) with ie for mac and safari. both of these browsers produce different and unwanted results. the biggest...
8
by: Bryan R. Meyer | last post by:
Hello Everyone, I am in the process of redesigning my web page and I ran into a problem while using CSS. I have laid out my web page with auto margins so that the content is centered. I assume...
6
by: | last post by:
I just installed VS 2005. Was working with 2003 and .Net 1.1. Trying to get the feel for a master page and I'm having some issues. I'm looking for a pretty basic setup. Standard header with an...
2
by: nonsensitor | last post by:
I'm just learning xhtml & css, primarily from westciv's online tutorials and css guide. I've run into a couple of problems with a page I'm developing that I can't figure out. The first problem is...
2
by: nino9stars | last post by:
Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using...
1
by: blackhawk | last post by:
I have been pulling my hair out trying to get this layout to work using DIV tags. With all the bugs, and hacks that I have been reading through in a ton of pages, I can’t seem to get the recipe...
4
by: Christopera | last post by:
Hello, I have built a site that uses two divs, one verticle, and one horizontal as graphic style for the ite. The problem I am having is that if the browser is resized very small the divs are...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.