How to pad out an image to create a banner effect in HTML
Question
I have a small image with a coloured background that I want to place at the top of an HTML page to the right, and have a band of the same background colour fill the space to the left, so that it just looks like a banner. I then want the rest of the page (text) to continue below the banner, not wrap around the image. I would prefer to use an inline style rather than CSS, but either is fine.
If I could wave a magic wand over the HTML syntax, I would have something like:
<body>
<image-as-banner src='mylogo.jpg' align='right' background-color='black'>
<p>And my normal text starts here underneath the banner</p>
</body>
That is to say... if I could slip in a single line of HTML to achieve this, I'd like to know what it is. It needs to specify the image, the fact that it wants to be aligned to the right, banner style, and that the colour to pad out the remaining space is black. Of course, there is no image-as-banner tag in HTML.
3 answers
solution1
0 2012-10-10 21:15:32
I suggest using a div container with background image and color attributes like so:
CSS:
<style type="text/css">
#banner{
background-image:url(images/banner.jpg);
background-color: #$$$$$$;
background-position: right;
background-repeat: no-repeat;
width: $px;
height: $px;
}
</style>
HTML:
<div id="banner">
</div>
solution2
0 2012-10-10 21:17:13
Something like this..?
<html>
<style type="text/css">
#container{width:100%;margin:0 auto;height:100%;background-color:grey;}
#banner{width:100%;height:100px;background-color:red;}
img{float:right;height:100px;}
#text{}
</style>
<body>
<div id='container'>
<div id='banner'><img src='http://darmano.typepad.com/logic_emotion/images/red.jpg'>
</div>
<div id='text'>
<h3>Put your text here..</h3>
</div>
</div>
</body>
<html>
solution3
0 2012-10-10 21:56:25
To the example you've pasted above, something like this might do the trick
<html>
<head></head>
<body>
<style type="text/css">
.img-banner {
background-color: black;
align: right;
/* etc etc etc */
}
</style>
<div class="img-banner">
<img src='mylogo.jpg' alt=''>
</div>
<p>And my normal text starts here underneath the banner</p>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.