?
Solved

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

Posted on 2009-05-19
10
Medium Priority
?
1,261 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 1000 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
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 1000 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month16 days, 20 hours left to enroll

862 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