Solved

Setting background-image in CSS file for ASP.NET application

Posted on 2009-05-19
10
1,210 Views
Last Modified: 2012-05-07
Hello,

I'm trying to set a background image for one of my pages using css file and for some reason it doesn't work :(

I can do it directly through the body tag:
style="background-image:url('Images/bgdesert.jpg')"

I can do it in the inner css in the header section:
    <style type="text/css">
            body
            {
                  background-image: url('Images/bgdesert.jpg');
            }
      </style>

But when I add it to the css file, it doesn't work :(
body
{
      background-image: url('Images/bgdesert.jpg');
}

Everything else in this section (I have other elements, just didn't show them) works fine, but not background-image. Any idea why?

Thanks
0
Comment
Question by:Yurich
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 12

Accepted Solution

by:
GuitarRich earned 250 total points
ID: 24420775
is the css file in the same folder as the aspx page? the url works relative to the path the css file is in so make sure that path is correct. e.g if the css is in a folder called styles you would change it too:
body
{
      background-image: url('../Images/bgdesert.jpg');
}
0
 
LVL 21

Author Comment

by:Yurich
ID: 24420912
you're right, css file in App_Themes/App_Theme/

so it should be      background-image: url('../../Images/bgdesert.jpg');
but still not working, I actually tried ../ and ../../ both, still no good...
0
 
LVL 12

Expert Comment

by:GuitarRich
ID: 24420934
or put your image in the app_theme folder and do background-image: url('bgdesert.jpg');
0
 
LVL 21

Author Comment

by:Yurich
ID: 24420989
doesn't work :(

can you try to create a very simpl project and see if it's going to work - just one page and one image and refer to it from a css file?

Thanks
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24421040
does the image need to be repeated.. i mean in either x or y coordinates?
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 13

Expert Comment

by:qwerty021600
ID: 24421053
check for the path.. if you giving the right path. also give height and width of the image.
0
 
LVL 9

Assisted Solution

by:tetorvik
tetorvik earned 250 total points
ID: 24421106
Are you sure you don't have any inline CSS blocks or style attributes on body tag that overrides the css in the linked css file (inline css will override the linked css if both declared)?
0
 
LVL 12

Expert Comment

by:GuitarRich
ID: 24421121
just created one and it worked ok. Just one thing - have you setup the theme in the webpage? You need to either add it to the web.config or you can put it at the top of the page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Theme="Theme1" Inherits="_Default" %>
 
0
 
LVL 21

Author Comment

by:Yurich
ID: 24425731
OK, thank you guys, found a problem.

There was an inline css, which I used for testing and it was apparently overriding my css file and I also didn't have ../../ thing at the time when I did not have inline css. So all together it didn't work and after I deleted inline css and added ../../ bit to my url path, it started work.

Thanks for your help
0
 
LVL 21

Author Closing Comment

by:Yurich
ID: 31582940
thank you
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now