How do I place two different pictures in the header, one in the center (I got that one), and one in the left side. The picture in the center is my page title and works fine but when I try to locate a second (and different) picture in the left corner, the first pic disappears and the second one takes it’s place in the center.
I’m using a separate external css page for layout.
Can you provide the code for us? It’s not a lot of help when we don’t even know what you’re doing.
Right now, I’d say use floats to align them.
It’d go something like this:
HTML:
<div id="Header">
<img src="house.jpg" class="image left"alt="A picture of a house!" />
<imb src="boat.jpg" class="image right" alt="A picture of a boat!"
</div>
CSS:
#Header
{
overflow:hidden;
clear:both;
}
.image
{
float:left;
}
.right
{
margin-left:3em;
}
Y’know?
~TehYoyo
This is what I’m doing and would kind of like everything to stay in my stylesheet if that’s possible. When I add another picture it messes up the first one.
#header {
text-size: 4;
font-family:,Arial,Helvetica,sans-serif;
color: silver;
padding: 0px;
height: 150px;
width: 100%
background: black;
background-image:url('psii.jpg'); background-repeat:no-repeat;
background-position: center;
}
You’ll need to provide more code that that: the full header CSS and the HTML that goes with it. Preferably, post a live link.
What I showed above is the full CSS for the header and the HTML is just a blank div.
<div id="container">
<div id="header">
</div>
The only thing in the header is the image from the CSS.
You talked about “adding another picture”, though. What do you mean by that? You can only have one background image on an element. If you want to do this all with bg images, why not just place both images into the one background image? That’s the easiest option.
It’s best to use background images only if the images are for decoration only. If they contain important content (like a site title) they should be in the HTML, with appropriate alt text for those who can’t see the image.
You could use multiple CSS backgrounds like so:
#header {
background: url(bg1.jpg) left center no-repeat, url(bg2.jpg) right center no-repeat;
}
See W3C’s information on backgrounds here to better understand how it all works.
Indeed; thanks for pointing that out, Maleika. I decided not to mention it, because of the inevitable disappointment when the OP finds that it doesn’t work in all browsers, as it’s very new. Of course, if older browsers are not a concern, then this is another viable option.
AH HA!! Brilliant, just what I was looking for. Both of these images are for decorative purposes anyway but they make the site look nice. I made the site title image in Gimp and it came out nice, didn’t really want to code it in…wouldn’t be as spiffy looking.
Thanks to both of you for you input and time.
Although keep in mind that multiple backgrounds aren’t supported in a lot of users/browsers (mainly, IE8 and below, which holds a lot of market share).
~TehYoyo
In order to replicate your effects for IE8 and below, you’ll need to add wrapper elements to hold the background image. Bit of a pain but that’s what you’re left with ;).
I appreciate the tips for sure…this is my first attempt at a website and can be a little confusing and a lot frustrating but it’s coming along at a rather snails pace. I wouldn’t be near as far as I am without the help I’ve been getting.
It will be at least a few months before a launch (if I’m lucky) and if I can produce a few bucks, I’ll surely remember who helped me and donate to the cause to ensure help is there for those in my own shoes.
I had limited experience in programming basic on my first computer (trs80 model III) but that was thirty years ago and is totally different from this type of coding. But somehow I feel that it helps me to understand some of this stuff.
My first codes came from HTML AND CSS book authored by Ian Lloyd and was directed to this site by that book.
Thanks again!!!
What you may be working with here is “graceful degradation.” In other words, the modern browser users get the spiffy double-pic display, while folks stuck with old crusty IE iterations get one and only one. But if it looks okay (i.e. the code “degrades” to give them the one-off pic display), then they’re none the wiser and they go right on perusing your site without problems. Unless these kind of display effects are necessary, I usually don’t bother with doing backflips for older browsers. That’s doubly true for the “enhancement” effects like text-shadow, rounded corners, etc. That kind of thing is basically eye candy – nice but not necessary.
Ian’s book is excellent. You might also be interested in another SP book, the CSS Anthology. The Head First into HTML and Head First into Web Design are also good starter books, as is SP alum Alex Dawson’s Getting StartED Building Websites.
I think it’s important to establish the importance of the elements you want to use these backgrounds for. Like Ryan and TehYoyo have pointed out; Using multiple backgrounds via CSS will only work in modern browsers, meaning it’ll not work in legacy versions of IE (IE8 and under) and old versions of Firefox, Opera, and Safari.
So, if you’re using these backgrounds for mere decoration, as you noted, then it shouldn’t matter much.
You should definitely use a background color to go with your background images, should text be involved. The best way to find out whether your site is usable with the absence of these backgrounds, is to turn off images. If your site is as usable as it was with these backgrounds, then you should be safe.