Menu
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="#">  Signup</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.
485
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.
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.
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.
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.
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.
194
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.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
