Adjust image size in div

[jazz1011]

Hi guys i am new for the ASP.net world so help to understand new stuffs.

I want to add an image as a background in my <div>. As an example, when you create a new asp.net web site. You will get few default stuffs like in this image. Now what i want is to change Header background with my banner. My banner size is 960px x 88px. Now i am not able to fit this image inside the header tag. Can anyone help me please

[sebastian3]

Can you put your code

[JorgeM]

div style="background-image:url('imageFile.gif');"

I would recommend that you first edit your image so that the image's dimension (width and height) are the same as your banner size. Otherwise you will skew the pic.

[jazz1011]

There is no special code for this i just tried to alter the CSS file. Look at the link on my main posting of this topic. It is the default web app which is create a new asp.net site. On the header of that which says "Welcome to ASP.net Application" behind that i am trying to insert my image.

Again my image size id 960px X 88px

[JorgeM]

Ok, in the CSS file, there are going to be a list of items (classes (.) and ids (#). Find the class or the ID that is assigned to the DIV that you want to assign the image to as a background. Say that DIV has a class assigned called "header". In the CSS file, you will see this:

.header

in between the braces add, background-image:url('imageFile.gif');

[jazz1011]

I did that adding url as well as adjusting the size of the div by width and height but that didnot work.

[jazz1011]

Reply to my previous post. I did that in .header in css as well as in .title. But did not work. PLease help me to learn more

[JorgeM]

That should have worked, but the issue may be that you do not have the picture file referced correctly. For example, if you have an images folder from the root of the website, you would reference the image this way:

div style="background-image:url('/imageFile.gif')

If you are unsure if you are modifying the CSS correctly, try another property such as background color. If you cant get that to work, you need to focus on the CSS.

div style="background-color:blue;"

If you are using visual studio, you dont even have to worry about directly editing the code. If you click on the div, you should see a properties box in the lower right side of the screen. From there, you can point and click and modfiy the values.

[jazz1011]

No it does show me the picture but not the whole picture as it should show.

[JorgeM]

So, I just fired up visual studio, created a new web site and modified the CSS (only added the background-image property to the header section-no other changes). I also added an "images" folder to the project and created an image file with the height and width that you indicated in this thread 960x88. The background image displayed perfectly.

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
    background-image:url(../images/background.png)
}

[jazz1011]

I will try to post my screen shot so that u will get it. How it shows.

[jazz1011]

My Banner Image

This is the Image. The Blur image is the Center text of the image and Logo is the left of the banner which is hidden. Also banner is not fully displayed in whole <div>

My CSS code:

.header
{
    background-image:url('../Images/Banner_1.png');
    position: relative;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height:100px;
    background-repeat:no-repeat;
    background-attachment:fixed;  
}