Adding a background image to a element
Is it possible to make a element contain a background image, and if so, how would I go about doing this?
-
You can do that using CSS's background propieties. There are few ways to do it:
By ID
HTML:
<div id="div-with-bg"></div>
CSS:
#div-with-bg
{
background: color url('path') others;
}
By Class
HTML:
<div class="div-with-bg"></div>
CSS:
.div-with-bg
{
background: color url('path') others;
}
In HTML (which is evil)
HTML:
<div style="background: color url('path')"></div>
Where:
- color is color in hex or one from X11 Colors
- path is path to the image
- others like position, attachament
background CSS Property is a connection of all background-xxx propieties in that syntax:
background:
background-color
background-image
background-repeat
background-attachment
background-position;
Source: w3schools
讨论(0)
-
Yes:
<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>
讨论(0)
-
Use like ..
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>
讨论(0)
-
For the most part, the method is the same as setting the whole body
.divi{
background-image: url('path');
}
</style>
<div class="divi"></div>
讨论(0)
-
Use this style to get a centered background image without repeat.
.bgImgCenter{
background-image: url('imagePath');
background-repeat: no-repeat;
background-position: center;
position: relative;
}
In HTML, set this style for your div:
<div class="bgImgCenter"></div>
讨论(0)
-
You can simply add an img src Attribute with id:
<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>
and in your CSS file (stretch background):
#backgroundimage
{
height: auto;
left: 0;
margin: 0;
min-height: 100%;
min-width: 674px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
讨论(0)
- 热议问题
Is it possible to make a
-
You can do that using CSS's background propieties. There are few ways to do it:
By ID
HTML:
<div id="div-with-bg"></div>CSS:
#div-with-bg { background: color url('path') others; }
By Class
HTML:
<div class="div-with-bg"></div>CSS:
.div-with-bg { background: color url('path') others; }
In HTML (which is evil)
HTML:
<div style="background: color url('path')"></div>
Where:
- color is color in hex or one from X11 Colors
- path is path to the image
- others like position, attachament
backgroundCSS Property is a connection of all background-xxx propieties in that syntax:background: background-color background-image background-repeat background-attachment background-position;
Source: w3schools
讨论(0) -
Yes:
<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>讨论(0) -
Use like ..
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div> <div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>讨论(0) -
For the most part, the method is the same as setting the whole body
.divi{ background-image: url('path'); } </style> <div class="divi"></div>讨论(0) -
Use this style to get a centered background image without repeat.
.bgImgCenter{ background-image: url('imagePath'); background-repeat: no-repeat; background-position: center; position: relative; }In HTML, set this style for your div:
<div class="bgImgCenter"></div>讨论(0) -
You can simply add an img src Attribute with id:
<body> <img id="backgroundimage" src="bgimage.jpg" border="0" alt=""> </body>and in your CSS file (stretch background):
#backgroundimage { height: auto; left: 0; margin: 0; min-height: 100%; min-width: 674px; padding: 0; position: fixed; top: 0; width: 100%; z-index: -1; }讨论(0)
加载中...
- 热议问题