How do I apply an image to background using inline CSS?
Question
I've tried this:
<div id="test" style="background:url(*Various image links*)>
</div>
But nothing shows.
How do I do it?
5 answers
solution1
1 2015-07-16 07:27:58
also display:block or inline-block, with a size
display:inline-block;
width:100px;
height:100px;
background-image:.....;
solution2
0 2015-07-16 07:31:28
Provide width and height of div:
<div id="test" style="background:url(*Various image links*); width:60px; height:60px;">
</div>
solution3
0 2015-07-16 07:31:28
remove the apostrophes in the url() and set size to the div
suppose
style="background:url('images/a.jpg');"
should be
style="background:url(images/a.jpg);"
solution4
0 ACCPTED 2015-07-16 07:33:16
Two things. Firstly, you need a height & width, unless you have content within the div, else it'll be sized at 0px by 0px. Secondly, you need to watch out for single vs double quotes. Here is working example:
<div id="test" style="background:url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png'); height:100px; width:100px;">
</div>
solution5
0 2015-07-16 08:14:26
here it is:
<body>
<div style="background-image:url('../../Images/flower.jpg');width:300px;height:234px">
The flowers are very beautiful.
</div>
and it's recommended to use background-color so in case the picture doesnt load there's a colorful page not blank.
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.