background image not loading

in my site www.actorvadivelu.com , the background tv image behind the youtube frame is not loading.
please help.

code used :

<div class="col-sm-4 center">
     <div class="tv">
           <iframe width="310" height="174" src="https://www.youtube.com/embed/zrKtAt4fKoM" frameborder="0" allowfullscreen></iframe>
     </div>
    </div>    

tv {
    background-image: url('../images/tv.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
      width:310px;
      height:174px;
}
codelevelAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Maria Benedict Nishanth ACommented:
The .tv is not there?????
Adrian HealCommented:
Hello codelevel,

First thing I notice is there is:
tv {
when it should read
.tv {
 
You may also want to check the tv.png is located at ../images/tv.png . If your website folder is called mypage and you have an images folder inside your mypage folder, it would be accessed via  images/tv.png . Your path is to a location that is back one directory level - then into an images folder at the same directory level as your page.

One last thing. If the background image covers an area the same size or smaller than the video, it will be covered completely by the video and will not be visible.

Hope this helps,
Multitude
Maria Benedict Nishanth ACommented:
you want the TV image as background. Isn't it????
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

codelevelAuthor Commented:
.tv is there, its just a typo in the question.
you can see the view source and inspect the html and style.
somehow the background image not loading. path of the image is also correct.
Maria Benedict Nishanth ACommented:
http://www.actorvadivelu.com/images/tv.png

Image not found.

Give me the image URL
codelevelAuthor Commented:
please check again.
Adrian HealCommented:
Hi codelevel,
I am running your code on my WAMP server. All works perfectly except for the ../images/tv.png . My images are usually in an images folder inside my webspage folder referenced with images/tv.png .

just to be clear...

My code normally accesses files in these locations:-
c:\wamp\www\mysite
c:\wamp\www\mysite\images

Your code is referencing files in these locations:-
c:\wamp\www\mysite
c:\wamp\www\images

Yes, I think ../ should work to take you back 1 directory (although I have never used it myself). I will run some tests and post back if I can get ../ to work correctly.

Multitude
codelevelAuthor Commented:
path is all good. css is good. image is there. html is good.
but somehow the background image not loading.
codelevelAuthor Commented:
if you fix it using developer tool. please paste the correct code (html and css) here.
Maria Benedict Nishanth ACommented:
Yes.

The thing is, We could access the image from web browser it the path is correct.

For example
http://cdn.experts-exchange.com/images/experts-exchange/logoFull.png

we can view the logo of Experts exchange.

The same case has to be applied in our case too.

We are struggling with the path only. The path has to be correct.
Maria Benedict Nishanth ACommented:
Move the images folder to your site(mysite)
Adrian HealCommented:
Hello codelevel,

Your code is working perfectly if the tv.png is placed into the same folder as your website with 'tv.png' .

Your code is also working perfectly if tv.png is placed into an images folder inside your webpage folder with 'images\tv.png' .

I am however, not able to get directory navigation to work within the path - using ../images/tv.png .

If the graphic belongs to this page and this site, the correct location for it is inside a folder at the same level of the page or a deeper level. It is unusual - IMHO - to put the file one directory back. I suggest moving the tv.png file into the webpage folder or into an image folder inside the webpage folder.

Multitude
Maria Benedict Nishanth ACommented:
Ok well.

 If you wish accept my comment as "Accepted Answer"

Enjoy coding.
Adrian HealCommented:
Hi codelevel,

Confirmed. The image path CAN NOT navigate you to a directory below the root directory of your website.

Multitude
Maria Benedict Nishanth ACommented:
Ok enjoy.

For your kind note I am Maria Benedict Nishanth A. You can call me Nishanth
codelevelAuthor Commented:
i have not got a good solution yet.
path is already correct. image is in the right folder. you should see it loading in the developer tool.
please find out the real issue in my site.
the images folder is at the same level as my css folder. the image loads in developer tool.
please find out what is missing in the code.
Maria Benedict Nishanth ACommented:
Here is my work

HTML
<div class="imageIs">
                  <iframe style="margin-left: 124px;margin-top: -103px;" width="400px" height="202px" src="https://www.youtube.com/embed/zrKtAt4fKoM" frameborder="0" allowfullscreen=""></iframe>
</div>

CSS
.imageIs{
                  background: url(tv.png) no-repeat;
                  background-size: 800px 600px, cover;
                  padding-top: 400px;
                  padding-bottom: 250px
}

See my view too
Maria Benedict Nishanth ACommented:
Here is my work

HTML
<div class="imageIs">
                  <iframe style="margin-left: 124px;margin-top: -103px;" width="400px" height="202px" src="https://www.youtube.com/embed/zrKtAt4f KoM" frameborder="0" allowfullscreen=""></iframe>
</div>

CSS
.imageIs{
                  background: url(tv.png) no-repeat;
                  background-size: 800px 600px, cover;
                  padding-top: 400px;
                  padding-bottom: 250px
}
Julian HansenCommented:
The problem is your .tv class has a fixed height and width AND the image is the same size as your iframe. I am assuming you want the youtube iframe to be in the middle of the TV image - which means either

You need to make the image bigger and its container
OR
You need to make the iframe smaller to fit the image

The background-position: fixed is also getting in the way.

To illustrate the point:
If you change your .tv class to this
.tv {
  background-image: url("../images/tv.png");
  background-position: center center;
  background-repeat: no-repeat;
  height: 334px;
  padding-top: 150px;
  width: 310px;
}

Open in new window

And your iframe dimensions to width="200" height="140" you will see the effect.

The other issue is that your TV image has a lot of space above the TV to accommodate the aerial - so to get to the "screen" you need top padding.

If you can give some idea of what the result is you are aiming for we can be more helpful.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Adrian HealCommented:
codelevel,

In summary, as per my first email, there appear to be 3 problems.
As follows:-

1) Missing . due to cut and paste error. Maria was quick on this one.

2) tv.png must be in your website folder or a sub-directory of your website folder using the code 'background-image: url("tv.png");' or 'background-image: url("images/tv.png");' . Maria and I both noticed this. Using the code 'background-image: url("../images/tv.png");' is referring to a file below the main folder of your website.

3) As I pointed out in my original post there appears to be a layout problem. This has been made very clear by Julian and his solution reads correctly (but I have not tested it).


Multitude
codelevelAuthor Commented:
thanks everyone.
julian, you were spot on.
Julian HansenCommented:
You are welcome.
Maria Benedict Nishanth ACommented:
You are welcome
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.