12 Replies - 2068 Views - Last Post: 17 January 2011 - 07:29 AM

#1 diego_pmc  Icon User is offline

  • D.I.C Addict

Reputation: 81
  • View blog
  • Posts: 565
  • Joined: 13-May 09

Background extending past limits

Posted 16 January 2011 - 03:14 PM

Is there any way to have the background image extend past the limits of the containing div? For example:
foo {
    background:url(bg.jpg) repeat-x;
    width:1000px;
}


The background would only repeat itself within the 1000px of the div. Is there any way to override this and have it repeat over the entire width of the screen? I'm looking for a CSS property or technique other than creating nested divs.

This post has been edited by diego_pmc: 16 January 2011 - 03:20 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Background extending past limits

#2 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 256
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Re: Background extending past limits

Posted 16 January 2011 - 03:16 PM

Are you trying to get it over the whole page or just slightly outside a div?
Was This Post Helpful? 0
  • +
  • -

#3 diego_pmc  Icon User is offline

  • D.I.C Addict

Reputation: 81
  • View blog
  • Posts: 565
  • Joined: 13-May 09

Re: Background extending past limits

Posted 16 January 2011 - 03:18 PM

View PostFungle, on 16 January 2011 - 03:16 PM, said:

Are you trying to get it over the whole page or just slightly outside a div?

I would like it to repeat over the width of the entire page.
Was This Post Helpful? 0
  • +
  • -

#4 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 256
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Re: Background extending past limits

Posted 16 January 2011 - 03:19 PM

You could set the background image onto the body, and specify repeat X.
Was This Post Helpful? 0
  • +
  • -

#5 diego_pmc  Icon User is offline

  • D.I.C Addict

Reputation: 81
  • View blog
  • Posts: 565
  • Joined: 13-May 09

Re: Background extending past limits

Posted 16 January 2011 - 03:25 PM

View PostFungle, on 16 January 2011 - 03:19 PM, said:

You could set the background image onto the body, and specify repeat X.


That's not an option for me. I have two background images: one that I plan to place in the body and which should not repeat (a drawing), and one that creates a bar across the top of the page (a header).

The body has a width:1030px property. I'd like to place the second background image — the bar — in the <header> tag definition, but I'd also like it to extend over the whole screen, not just the 1030px imposed by the body.

If I use nested divs I need three of them to accomplish what I want (which I'd rather avoid). If there is a CSS property that allows the background to go over the width limit, that'd be great.

This post has been edited by diego_pmc: 16 January 2011 - 03:29 PM

Was This Post Helpful? 0
  • +
  • -

#6 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Background extending past limits

Posted 16 January 2011 - 04:43 PM

You could try and make the width of the image 100% like so:
foo {
    background:url(bg.jpg);
    width:100%;
}


This will make it so that the image should spand across the whole div. The size will be according the size of the div it's in (or the body element). This won't work if you're trying to repeat the image. If that's what you going for you can add the repeat-x again. Is this a class or id. I've never heard of a selector called foo?
Was This Post Helpful? 0
  • +
  • -

#7 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 256
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Re: Background extending past limits

Posted 16 January 2011 - 04:52 PM

foo is just a dummy name for a selector, class or method ^^ For demonstration purposes.
Was This Post Helpful? 1
  • +
  • -

#8 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Background extending past limits

Posted 16 January 2011 - 04:54 PM

Do you have an example of that? :whistling:

This post has been edited by drhowarddrfine: 16 January 2011 - 04:54 PM

Was This Post Helpful? 0
  • +
  • -

#9 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Background extending past limits

Posted 16 January 2011 - 04:55 PM

View PostFungle, on 16 January 2011 - 06:52 PM, said:

foo is just a dummy name for a selector, class or method ^^ For demonstration purposes.

I see.
Was This Post Helpful? 0
  • +
  • -

#10 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 256
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Re: Background extending past limits

Posted 16 January 2011 - 04:56 PM

View Postdrhowarddrfine, on 16 January 2011 - 11:54 PM, said:

Do you have an example of that? :whistling:


I have three!
#foo {

}

.foo {

}

function foo(){

}


This post has been edited by Fungle: 16 January 2011 - 04:57 PM

Was This Post Helpful? 0
  • +
  • -

#11 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Background extending past limits

Posted 16 January 2011 - 04:57 PM

So it can mean a class, id, or function. Okay.
Was This Post Helpful? 0
  • +
  • -

#12 diego_pmc  Icon User is offline

  • D.I.C Addict

Reputation: 81
  • View blog
  • Posts: 565
  • Joined: 13-May 09

Re: Background extending past limits

Posted 17 January 2011 - 07:28 AM

View PostEnvXOwner, on 16 January 2011 - 04:57 PM, said:

So it can mean a class, id, or function. Okay.


It can mean anything, really. It's computer-talk for "placeholder".
Was This Post Helpful? 0
  • +
  • -

#13 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Background extending past limits

Posted 17 January 2011 - 07:29 AM

View Postdiego_pmc, on 17 January 2011 - 09:28 AM, said:

View PostEnvXOwner, on 16 January 2011 - 04:57 PM, said:

So it can mean a class, id, or function. Okay.


It can mean anything, really. It's computer-talk for "placeholder".

Okay, thank you. I learned something new today. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1