A seemingly simple question. I was wondering if there was a way to place a background image a set number of pixels from the right and/or the bottom edge of its container?
for example, if I wanted a single back ground image to be 20px from the top and 10px from the left I can do something like:
div{background:url(pic.jpg) 10px 20px no-repeat;}
but what if i wanted the same image to be placed 20px from the bottom and 10px from the right?
So far the only way I have come up with is by using GIFs or PNGs which become highly impractical.
If you want it a set number of pixels from the right/bottom edge of a fluid container, the only solution I can see - without adding extra elements and layers, is to simply enlarge the image canvas and leave the required amount of transparent space to the right/bottom, and then position it to the right/bottom.
Thanks, I was trying to avoid having the image as content, but if there are no alternate methods, AP it is…
Well, there is another way to do this.
I’m not trying to discredit your approach ralph but you are actually using an inner div to layer over the html image. That inner div could hold the BG image. Then just pad the outer div for the 20px space in the bottom right corner. That eliminates the extra img element and trims down the CSS also.
If you need the text or other content to extend into the parent padding then that would require some negative margins. I have overflow:hidden on my inner div so that would need to be removed.
Unless I have missed something it should work just fine
Something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
div.outer {
width: 40%;
padding:0 20px 20px;
background: #CCC;
}
.outer div {
overflow:hidden;/*haslayout IE7 - uncollapse margins - contain floats*/
background: url(image.gif) no-repeat 100% 100%;
}
p {
margin:20px 0 0;
}
</style>
</head>
<body>
<div class="outer">
<div>
<h1>A Title</h1>
<p>An vero vir amplissumus, P. Scipio, pontifex maximus, Ti. Gracchum mediocriter labefactantem statum rei publicae privatus interfecit; Catilinam orbem terrae caede atque incendiis vastare cupientem nos consules perferemus? Nam illa nimis antiqua praetereo, quod C. Servilius Ahala Sp. Maelium novis rebus studentem manu sua occidit.</p>
<p>Fuit, fuit ista quondam in hac re publica virtus, ut viri fortes acrioribus suppliciis civem perniciosum quam acerbissimum hostem coercerent.</p>
<p>Habemus senatus consultum in te, Catilina, vehemens et grave, non deest rei publicae consilium neque auctoritas huius ordinis; nos, nos, dico aperte, consules desumus.</p>
<p>Decrevit quondam senatus, ut L. Opimius consul videret, ne quid res publica detrimenti caperet; nox nulla intercessit; interfectus est propter quasdam seditionum suspiciones C. Gracchus, clarissimo patre, avo, maioribus, occisus est cum liberis M. Fulvius consularis.</p>
</div>
</div>
</body>
</html>
I’m no Sherlock Holmes with this stuff, so there are probably better solutions. It might be worth waiting for some other replies before deciding for sure.
Stevie,
tha’ts what I meant by using GIFs or PNGs. It becomes impractical when you are tweaking or want to reuse the image in at a different distance from the right edge, or simply if the distance desires approaches the width of the image ( example adding 100px to the right and bottom of a 25px 25px image seems wasteful, if there was another confirmed method). I just wanted to see what the bright minds were up to in this regard
Wow. Paul. That was truly and oldie but goody. I dunno why I didnt think of ate :before/ :after pseudo elements. Shadow had some great answers . I can see now how to achieve this as stated in your post or in combination with AP.
You just give it a lower z-index than the other elements. I tried a little experiment, in which all the elements other than the image are wrapped in a div with a higher z-index. (The image used is attached below):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style type="text/css" media="all">
div.outer {position:relative; width: 40%; background: #f7f7f7}
img {position:absolute; right: 20px; bottom: 20px;z-index: 1}
.outer div {position:relative; z-index:2}
</style>
</head>
<body>
<div class="outer">
<img src="image.gif">
<div>
<h1>A Title</h1>
<p>An vero vir amplissumus, P. Scipio, pontifex maximus, Ti. Gracchum mediocriter labefactantem statum rei publicae privatus interfecit; Catilinam orbem terrae caede atque incendiis vastare cupientem nos consules perferemus? Nam illa nimis antiqua praetereo, quod C. Servilius Ahala Sp. Maelium novis rebus studentem manu sua occidit.</p>
<p>Fuit, fuit ista quondam in hac re publica virtus, ut viri fortes acrioribus suppliciis civem perniciosum quam acerbissimum hostem coercerent.</p>
<p>Habemus senatus consultum in te, Catilina, vehemens et grave, non deest rei publicae consilium neque auctoritas huius ordinis; nos, nos, dico aperte, consules desumus.</p>
<p>Decrevit quondam senatus, ut L. Opimius consul videret, ne quid res publica detrimenti caperet; nox nulla intercessit; interfectus est propter quasdam seditionum suspiciones C. Gracchus, clarissimo patre, avo, maioribus, occisus est cum liberis M. Fulvius consularis.</p>
</div>
</div>
</body>
</html>
If you know the width and the height of the container it would be easy enough. In this situation I’d be more inclined to place the image in the HTML and position it absolutely.
