background image of an <div> ?

@ggallenJan 16.2012

I split my page into 3 divs: header, main and footer.

Is there a way to put a background image on just the main division?
I’d prefer to use inline styling, because I only want this image on one
page, and I am using one css file for all pages.

I tried adding a style=”background-image:URL” to the <div> tag, but
that didn’t do what I wanted…

Any other suggestions?

to post a comment

HTML

@tracknutJan 16.2012 — #background-image should work.... show us the code.

Dave

@ggallenauthorJan 16.2012 — #In double checking, I found I had a typo.

I now have <div style="background: url(URL)"

This does work, however, it only shows the top of the image.

here's what I'm not sure how to do.

My <div> size setup is as follows:

#main {

position:absolute;

width:100%;

top:140px;

bottom:50px;

background-color: #ffff66;

border-top: none;

border-bottom: none;

overflow: scroll;

}

I'm defining the top to be 140 pixels down, and the bottom to be 50 pixels from the bottom. Is there a way to make the background image 100% vertically between those and 100% horizontally, without actually specifying an actual number? This way I could make the image size smaller and just have it auto enlarged. The image I'm using can stretch without too much issue, so that won't be a problem.

@rtretheweyJan 16.2012 — #Positioning does not determine the size of an element. If #main is the div you're using to hold the content of your page, try:

<i>
 </i>#main {
 width:100&amp;#37;;
 margin-top:140px;
 margin-bottom:50px;
 background-color: #ffff66;
 border-top: none;
 border-bottom: none;
 overflow: scroll;
 }

@flashcusJan 16.2012 — #I think he's hit the problem of the middle div not expanding down to the bottom div? If so, you need to create a parent div which is width 100% and height 100%, and then set the background to the image, and background position to offset the top and bottom divs.

@rtretheweyJan 16.2012 — #Yeah, I didn't think that through. I'll have to come back to it later.

background image of an <div> ?

5 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

background image of an <div> ?

5 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #HTML _↴