/    Sign up×
Community /Pin to ProfileBookmark

div tags 2 background images

Copy linkTweet thisAlerts:
Feb 03.2006

anyone know how I can make two background images sit side by side(50% ea) at 25px to display on one line, so the name “hello” images are together?

<div style=”background-image: url(blue_left.gif); width: 50%; height:

25px; background-repeat: repeat; text-align: right;”>
<a>
<img src=”pages/images/chrome/small/h_clr.gif”>
<img src=”pages/images/chrome/small/e_clr.gif”>
<img src=”pages/images/chrome/small/l_clr.gif”>
&nbsp;&nbsp;&nbsp;
</a></div>
<div style=”background-image: url(blue_right.gif);
width: 50%; height:
25px; background-repeat: repeat; text-align: left;”>
<a>
<img src=”pages/images/chrome/small/l_clr.gif”>
<img src=”pages/images/chrome/small/o_clr.gif”>

</a></div>

to post a comment
CSS

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@KravvitzFeb 03.2006 — Either combine the images or add a parent div that you can apply one of the background images to.
Copy linkTweet thisAlerts:
@ranosbauthorFeb 03.2006 — Im new to div tags, parent div? Can you show me by example?
Copy linkTweet thisAlerts:
@KravvitzFeb 03.2006 — I simply mean that you can add another div and put the current div inside of it.

&lt;div&gt;
&lt;div style="background-image: url(blue_left.gif); width: 50%; height:

25px; background-repeat: repeat; text-align: right;"&gt;
&lt;a&gt;
&lt;img src="pages/images/chrome/small/h_clr.gif"&gt;
&lt;img src="pages/images/chrome/small/e_clr.gif"&gt;
&lt;img src="pages/images/chrome/small/l_clr.gif"&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;/a&gt;&lt;/div&gt;
&lt;div style="background-image: url(blue_right.gif);
width: 50%; height:
25px; background-repeat: repeat; text-align: left;"&gt;
&lt;a&gt;
&lt;img src="pages/images/chrome/small/l_clr.gif"&gt;
&lt;img src="pages/images/chrome/small/o_clr.gif"&gt;

&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@ranosbauthorFeb 03.2006 — It still displays on two lines, like a <br> in between the background images...

Will it not work?
Copy linkTweet thisAlerts:
@KravvitzFeb 03.2006 — Oh, I misinterpreted your question.

It's acting like a <br> because <div>s are block-level elements; they're supposed to do that.

You should float the first div left and put a left margin on the second one.
&lt;div style="background-image: url(blue_left.gif); [b]float:left;[/b] width: 50%; height:

25px; background-repeat: repeat; text-align: right;"&gt;
&lt;a&gt;
&lt;img src="pages/images/chrome/small/h_clr.gif"&gt;
&lt;img src="pages/images/chrome/small/e_clr.gif"&gt;
&lt;img src="pages/images/chrome/small/l_clr.gif"&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;/a&gt;&lt;/div&gt;
&lt;div style="background-image: url(blue_right.gif);
[b]margin-left:50%;[/b] height:
25px; background-repeat: repeat; text-align: left;"&gt;
&lt;a&gt;
&lt;img src="pages/images/chrome/small/l_clr.gif"&gt;
&lt;img src="pages/images/chrome/small/o_clr.gif"&gt;

&lt;/a&gt;&lt;/div&gt;

Here's some more information on floats:

http://css.maxdesign.com.au/floatutorial/index.htm

http://www.brunildo.org/test/#flo

http://garyblue.port5.com/webdev/floatdemo.html

http://www.csscreator.com/attributes/containedfloat.php

http://www.positioniseverything.net/easyclearing.html

http://www.quirksmode.org/css/clearing.html

http://css-discuss.incutio.com/?page=ClearingSpace

[url=http://nemesis1.f2o.org/aarchive?id=11]Curing Float Drops and Wraps[/url]
Copy linkTweet thisAlerts:
@ranosbauthorFeb 03.2006 — Thats almost perfect, only for some reason theres a white space in between each background image ____ ____..

~margin: 0; doesn't work, what is that white space from?

~Doesn't appear in Netscape though...

Putting the code into a table and changing the first background image to"

float:left; width: 100%;

And the second image to:

margin-left: 0%

This closes the gap...
Copy linkTweet thisAlerts:
@KravvitzFeb 03.2006 — Don't use a table. IE6 is a bug ridden piece of junk.

Try floating them both. You may need to clear them though.
&lt;div style="background-image: url(blue_left.gif); [b]float:left; width: 50%;[/b] height:

25px; background-repeat: repeat; text-align: right;"&gt;
&lt;a&gt;
&lt;img src="pages/images/chrome/small/h_clr.gif"&gt;
&lt;img src="pages/images/chrome/small/e_clr.gif"&gt;
&lt;img src="pages/images/chrome/small/l_clr.gif"&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;
&lt;/a&gt;&lt;/div&gt;
&lt;div style="background-image: url(blue_right.gif);
[b]float:left; width: 50%;[/b] height:
25px; background-repeat: repeat; text-align: left;"&gt;
&lt;a&gt;
&lt;img src="pages/images/chrome/small/l_clr.gif"&gt;
&lt;img src="pages/images/chrome/small/o_clr.gif"&gt;

&lt;/a&gt;&lt;/div&gt;
Copy linkTweet thisAlerts:
@ranosbauthorFeb 03.2006 — Outstanding~ works like a charm.

One last ?

Div tags. The scripting in the tags, This is css? Doesn't css need <style> or an external css script to work properly?
Copy linkTweet thisAlerts:
@KravvitzFeb 03.2006 — That's inline CSS. CSS is a style, or presentation, language, not a scripting language.

Instead of selectors it's applied via the style attribute of each element.

You could use classes or IDs so you could move the CSS to a style element or an external stylesheet.

[url=http://css-discuss.incutio.com/?page=ClassesVsIds]When should I use a class and when should I use an ID?[/url]
Copy linkTweet thisAlerts:
@ranosbauthorFeb 03.2006 — Thats what I thought, interesting...

One last ?

The background images are 400px wide(for 800x600), how can I make them stretch for a 1024 resolution? Im using background-repeat: repeat-y; for the vertical repeat, but horizontal repeat will not work right, I need them to stretch or fit to screen resolution.

I would think width: 50%; would be good for all resolutions, no matter what size the image...

Is there a "screen.width" for css like javascript?
Copy linkTweet thisAlerts:
@KravvitzFeb 04.2006 — CSS2 does not provide a way to specify dimensions for background images. [url=http://www.dynamicsitesolutions.com/css/stretched_fixed_position_background_image/]To stretch the image, you could use some of the techniques shown in this demo.[/url]

No, there is no screen.width equivalent in CSS2.
Copy linkTweet thisAlerts:
@ranosbauthorFeb 04.2006 — Great! Thanks for all your help...
×

Success!

Help @ranosb spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...