-3

I need to figure out how to overlay an image of my logo on top of another repeating image that is being used as a background for the nag bar at the top of my site.

The CSS for the nag bar image looks like this:

.header {
background:url(../images/bg-header.jpg) repeat-x;
height:125px;

is there a way to add another image on top of this and have it aligned to the left side of the underlying image?

user2813373
  • 11

2 Answers2

0

Something like this?

http://jsfiddle.net/aJEwZ/

<style>
.nav {
    background: url(http://www.psdgraphics.com/file/light-wooden-background.jpg) repeat-x;
    height: 250px;
    width: 500px;
    border:1px solid black;
}

img {
    padding:20px;
}
</style>

<div class='nav'>
    <img src="http://a.deviantart.net/avatars/h/a/haz-elf.jpg?1" />
    hello</div>
Jason
  • 15,915
  • 3
  • 48
  • 72
0

Here you go.

here's a DEMO

and here's the CODE

Here's the css 

.header {
    background:  url("http://fc04.deviantart.net/fs70/i/2013/266/7/3/sydneigh_logo_by_robberbutton-d6nmaox.png") top left no-repeat ,url("http://subtlepatterns.com/patterns/sandpaper.png") repeat-x;
    background-size: 571px 125px, auto;
    height:125px;
    width: 100%;
}

notice how the background attribute has two shorthand backgrounds with images written out seperated by a comma. The first image is on top of the second image and so on.

The first property of attribute background-size only applies to the first property in the background attribute (the first image in the declared background attribute.) The second applies to the second image in the background attribute.

This works the same way with other background-properties such as background-repeat, and background-image.

Here's an article on having multiple background images:
http://www.css3.info/preview/multiple-backgrounds/

John
  • 7,114
  • 2
  • 37
  • 57