19 replies [Last post]
atomicrabbit
atomicrabbit's picture
Offline
newbie
Last seen: 12 years 8 weeks ago
Joined: 2007-08-13
Posts: 10
Points: 0

is it possible to create a very long background image where the bottom of the image is flush to the bottom of the div tag and the top is cut off to however tall the div tag is?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Yes, just set the vertical

Yes, just set the vertical background-position to bottom.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

atomicrabbit
atomicrabbit's picture
Offline
newbie
Last seen: 12 years 8 weeks ago
Joined: 2007-08-13
Posts: 10
Points: 0

is there any way to cut it

err.. i'm an idiot.. Sometimes the brain farts really hit hard. Thanks. How can I cut it off, like, 10px from the top of the div? So, it's aligned to the bottom, but 10px down from the top of the div is where the bg starts showing.

This is basically what I want to achieve:

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Yes, just set the top

Yes, just set the top position to a negative number, eg

background: blue url(bg.jpg) repeat-y -10px 0;

Verschwindende wrote:
  • CSS doesn't make pies

atomicrabbit
atomicrabbit's picture
Offline
newbie
Last seen: 12 years 8 weeks ago
Joined: 2007-08-13
Posts: 10
Points: 0

1) don't you

1) don't you mean:
background: blue url(bg.jpg) repeat-y 0 -10px;
the position values are xpos ypos, not ypos xpos.

2) the image is one long PNG image and does need to be repeated, so i am using no-repeat

3) the "bottom" tag is no longer in your code, so it's aligned to the top using your example. In my crude drawing i posted above, the light blue/dark blue area is one large PNG image, not a repeated pattern.. the light blue part should be cut off/hidden when displaying it in the div.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Isn't that exactly what

Isn't that exactly what bottom aligning it does?

EG if your containing div is too small it cuts off the top of the image?

Verschwindende wrote:
  • CSS doesn't make pies

atomicrabbit
atomicrabbit's picture
Offline
newbie
Last seen: 12 years 8 weeks ago
Joined: 2007-08-13
Posts: 10
Points: 0

yes.. it does cut off the

yes.. it does cut off the background at the top of the div, but I want it to cut off 10px below the top of the div. Is that possible?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Well why is your image too

Well why is your image too big?

And why can you not just make the containing div 10px smaller than the image itself?

Verschwindende wrote:
  • CSS doesn't make pies

atomicrabbit
atomicrabbit's picture
Offline
newbie
Last seen: 12 years 8 weeks ago
Joined: 2007-08-13
Posts: 10
Points: 0

because: 1) It's being used

because:

1) It's being used in several different sized div tags

and

2) The reason I'm using a single long image instead of a repeating pattern is because, well... it just won't work that way and the bottom of my image is rounded, there is a shadow that fades to transparent updwards. There are several different reason. A repeated background just won't work for what I'm applying it to.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You'll have to give whatever

You'll have to give whatever elements the image is applied to a min-height 10px greater than the height of the image.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

atomicrabbit
atomicrabbit's picture
Offline
newbie
Last seen: 12 years 8 weeks ago
Joined: 2007-08-13
Posts: 10
Points: 0

you're not understanding

you're not understanding what I'm trying to do. I assume it's probably not possible, but:
1) I need the image to be larger than the largest div tag so that it can be used universally
2) have a 10px space between the top fo the div and where the bg image starts displaying.
3) be aligned to the bottom of the div tag.

It may seem complicated in words, but if you saw what I'm applying it to, it's really not complicated at all.

again.. I am assuming what I'm trying to do is probably not possible.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

atomicrabbit wrote:It may

atomicrabbit wrote:
It may seem complicated in words, but if you saw what I'm applying it to, it's really not complicated at all.

Then why don't you show us a real, live example?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

can you use a 10px top

can you use a 10px top margin on the div?

atomicrabbit
atomicrabbit's picture
Offline
newbie
Last seen: 12 years 8 weeks ago
Joined: 2007-08-13
Posts: 10
Points: 0

Tyssen wrote:Then why don't

Tyssen wrote:
Then why don't you show us a real, live example?

well, um.. i kinda did in my second post (an image, i mean).. and I can't really show you a live example on a webpage, or else I wouldn't be askinng you HOW to do it in the first place.
*atomicrabbit

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 13 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I think Tyssen was asking

I think Tyssen was asking for you to go out and find a site that you like and resembles what you are trying to do.

Also, it would help if you would post all the code you currently have so that we might have a better idea of what you are doing.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

atomicrabbit
atomicrabbit's picture
Offline
newbie
Last seen: 12 years 8 weeks ago
Joined: 2007-08-13
Posts: 10
Points: 0

again, i don't mean to be

again, i don't mean to be rude, but if I could find a site with a similar style, I would just learn from that site. But I can't, which is why i am here. If it helps, this is the image I am using:

The image will be used in several navigational menu modules of different heights. This is the CSS I am currently using:

div#sidebar { background: transparent url("../images/module-bg.png") no-repeat; background-position: bottom; min-width: 182px; min-height: 220px; padding-bottom: 5px; margin-bottom: 20px; }

The reason I want a 10px space at the top of the div is because there will be content at the top that I don't want the bg image to display under.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 13 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

If you want content at the

If you want content at the top without a background image, why not just make a new div?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

atomicrabbit
atomicrabbit's picture
Offline
newbie
Last seen: 12 years 8 weeks ago
Joined: 2007-08-13
Posts: 10
Points: 0

because a lot of the site

because a lot of the site is automated (php/sql) and it's not easy to do that. I'll pretty much have to start from scratch... if it's not possibe in CSS i can do without it, but would prefer it. It seems that since so many people are asking me WHY I want to do it and offering me alternative solutions, that it's not possible. Am I correct in my assumption?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 13 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

well without ALL of your

well without ALL of your code or without a live link it's hard for us to give you an exact answer. So we are giving you answers we know for a fact will work.

And just because a site is automated in no way means you have to recode the entire thing from scratch.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

atomicrabbit
atomicrabbit's picture
Offline
newbie
Last seen: 12 years 8 weeks ago
Joined: 2007-08-13
Posts: 10
Points: 0

well, I was exaggerating

well, I was exaggerating just a bit, but it won't be easy the way I've coded it. I'll just have to deal with it for now. thanks again. I appreciate the responses and help!