21

Kind of new to css but I have one image I want on top left corner and then another image I want to repeat after that. Currently I tired:

CSS

#topsection{
    background: url('../images/bannerBGs.jpg');
    background-repeat:no-repeat;
    background: url('../images/bannerBGl.jpg');
    background-repeat:repeat-x;
    height: 200px; /*Height of top section*/
    color: White;
    text-align:center
}

#topsection a{
    color: #FFFF80;
}

#topsection h1{
    margin: 0;
    padding-top: 25px;
    text-align:Left
}

#topsection h2{
    margin: 0;
    padding-top: 0px;
    text-align:Center
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IG Indy Gamers</title>
<link rel="stylesheet" type="text/css" href="CSS/mycss.css" media="screen" />    
</head>
<body>
<div id="maincontainer">

<div id="topsection" > <div class="innertube">
    <h1>IG -Indy Gamers </h1>  
    <FONT style="BACKGROUND-COLOR: blue"><p align='right'><a href="#"> &nbspSignup</a> </font> / <a href='Login.html' id='LoginContent' >Login </a></p> 
    <ul id="list-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Reviews</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Demo's</a></li>
        <li><a href="#">Members</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

</div></div>

but the second image just copies over the first. Can you suggest another way to do this. I heard using layers may do it but I know nothing about that yet.

4 Answers 4

52

Looks like CSS3 supports multiple background images; you specify them separated by commas:

background: url('banner1.jpg'), url('banner2.jpg');
background-position: left top, left top;
background-repeat: no-repeat, repeat;

Play with background-position until it does what you want.

IE < 9 does not support this feature.

1
3

You'll need to create 2 containing elements: 1 for the repeating image. And a 2nd for the image in the top left.

In other words, something along the lines of:

<div class="repeatingBgImage">
  <div class="otherBgImage">
    <!-- content -->
  </div>
</div>

CSS works in a, well, cascading manner. Anything you declare can and will be overwritten by the next line in the statement, i.e.,

.someClass {
  color: yellow;
  color: blue;
}

The final color of the text will be blue, not green (yellow+blue=green).

Given your sample...

#topsection{
  background: url('../images/bannerBGs.jpg');
  background-repeat:no-repeat;
  background: url('../images/bannerBGl.jpg');
  background-repeat:repeat-x;
}

... the background image will always be bannerBGl.jpg and repeat-x since it is lower in the declaration of the CSS, thus overwriting the previous bg image and repeat declaration.

1

If you're targeting new browsers, css3 now can apply two background images on one element. You might want to check this one out

http://www.css3.info/preview/multiple-backgrounds/

0

you css

/*TOPSECTION */
#topsection{
background: url('../images/bannerBGs.jpg');
background-repeat:no-repeat;
background: url('../images/bannerBGl.jpg');
background-repeat:repeat-x;
height: 200px; /*Height of top section*/
color: White;
text-align:center
}

try this

background-image:url('../images/bannerBGs.jpg'),url('../images/bannerBGl.jpg');
background-repeat: no-repeat, repeat-x;
background-position: left top , 20px 30px; 
//background-position  adjust second value which in px until  you meet your requirment  

Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.