Solved

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

Posted on 2009-05-19
10
1,222 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

776 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