Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css two background images

Tags:

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.

like image 485
Glen Morse Avatar asked Aug 06 '12 00:08

Glen Morse


People also ask

Can you have 2 background images in CSS?

CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

Can you have multiple background images HTML?

The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images.

How do I combine background and background images in CSS?

Use background-blend-mode and rgba to mix the background image and color. If you adjust the alpha value of the rgba color value (it's at . 85 in the example), you can control the transparency. Also, background-blend-mode has other values you can play with to get some really creative results.

Is multiple background picture possible?

You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.


2 Answers

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.

like image 194
Christian Mann Avatar answered Nov 02 '22 04:11

Christian Mann


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.

like image 32
Metro Smurf Avatar answered Nov 02 '22 04:11

Metro Smurf