0

Is it possible to to add a background image in the html?

here is my fiddle i need it on the "container div"

I also need the background to stretch across the canvas can i do this in the css??

http://jsfiddle.net/7Gacp/3/

<div id="profile-container">
    <div id="fixed-header"></div>
    <div class="container" style="background: url("../../img/followers/followers-tabs.png") no-repeat 0 0px;"></div>
    <div class="sticky-header">This needs to be fixed when hits top of screen</div>
    <div class="img">needs to be smooth</div>
    <div class="img"></div>
    <div class="img"></div>
</div>

Cheers

Paul Designer
  • 845
  • 1
  • 14
  • 21
  • Please refer to: http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only – Marco Oct 14 '13 at 20:59
  • Fix your quotes: `"background: url("../../img/followers/followers-tabs.png") no-repeat 0 0px;"` to `"background: url('../../img/followers/followers-tabs.png') no-repeat 0 0px;"` – j08691 Oct 14 '13 at 21:00
  • could you add fiddle please? – Paul Designer Oct 14 '13 at 21:17
  • C'mon, this is absolutly basic for every developer, and beside that it's just a 10sec google search. – Sliq Oct 15 '13 at 06:46

4 Answers4

2

Remove the double quotes and use single quotes instead like this

"background: url('../../img/followers/followers-tabs.png')
0

background-image:url('image path'); put this block of code in ur css and get the background image set.

Manish Tuteja
  • 205
  • 1
  • 7
0
.container {
 height:300px;
 width:100%;
 background-image: url("Put your image link here.");
}

Would work for inline styling:

<div class="container" style="background: url('Put your image link here.') no-repeat 0 0px;"></div>

Fiddle

Almost A Developer
  • 105
  • 1
  • 2
  • 12
0

You need to remove qoutes from the url

<div class="container" style="background: url(../../img/followers/followers-tabs.png) no-repeat 0 0px;"></div>

You could use ' but url in CSS background doesn't need them at all.

Here's the fixed fiddle: http://jsfiddle.net/7Gacp/10/.

To spread the background you can use

background-size: 100% 100%;

Here's another fiddle: http://jsfiddle.net/7Gacp/11/.

matewka
  • 9,912
  • 2
  • 32
  • 43