Programming Help

Web Development



What's Here?

  • Members: 137,384
  • Replies: 481,892
  • Topics: 75,127
  • Snippets: 2,568
  • Tutorials: 676
  • Total Online: 2,118
  • Members: 68
  • Guests: 2,050

Welcome to Dream.In.Code
Become an Expert!

Join 137,384 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,118 people online right now. Registration is fast and FREE... Join Now!




Scaling CSS backgrounds

 
 Reply to this topicStart new topic

Scaling CSS backgrounds, How-do I scale backgrounds through the use of CSS or other technique
livelonger87
10 Oct, 2008 - 01:48 AM
Post #1

New D.I.C Head
*

Joined: 27 May, 2008
Posts: 30


My Contributions
Prefebly CSS, how could I scale backgrounds attached to a div to screen/browser resolutions. I can scale layouts through the use of absolute values, that of which are compatible throughout various web browsers but cannot scale attached images to the size of the layout. For instance, this wouldn't work...

CODE

#div01 {
width: 40%;
height: 20%;
background-image: url('image.jpeg');
border: 1px solid black;
}

The image wouldn't scale to the size of the div, screen resolution or browser window. I've tried using absolute values throughout <img src> tags but haven't succeeded.

Can someone help me out please?
User is offlineProfile CardPM
+Quote Post

devonator
RE: Scaling CSS Backgrounds
12 Oct, 2008 - 02:33 AM
Post #2

New D.I.C Head
*

Joined: 6 Sep, 2008
Posts: 43


My Contributions
how about this? I got this from http://www.w3.org/TR/2002/WD-css3-backgrou...background-size

CODE

Here are some examples. The first example stretches the background image independently in both directions to completely cover the content area:
div {
    background-image: url(plasma.png);
    background-size: 100%;
    background-origin: content}

The second example stretches the image so that exactly two copies fit horizontally. The aspect ratio is preserved:
p {
    background-image: url(tubes.png);
    background-size: 50% auto;
    background-origin: border}

This example forces the background image to be 15 by 15 pixels:
para {
    background-size: 15px;
    background-image: url(tile.png)}

This example uses the image's intrinsic size. Note that this is the only possible behavior in CSS level 1 and 2.
body {
    background-size: auto;
    background-image: url(flower.png)}
User is offlineProfile CardPM
+Quote Post

livelonger87
RE: Scaling CSS Backgrounds
12 Oct, 2008 - 02:03 PM
Post #3

New D.I.C Head
*

Joined: 27 May, 2008
Posts: 30


My Contributions
QUOTE(devonator @ 12 Oct, 2008 - 03:33 AM) *

how about this? I got this from http://www.w3.org/TR/2002/WD-css3-backgrou...background-size

CODE

Here are some examples. The first example stretches the background image independently in both directions to completely cover the content area:
div {
    background-image: url(plasma.png);
    background-size: 100%;
    background-origin: content}

The second example stretches the image so that exactly two copies fit horizontally. The aspect ratio is preserved:
p {
    background-image: url(tubes.png);
    background-size: 50% auto;
    background-origin: border}

This example forces the background image to be 15 by 15 pixels:
para {
    background-size: 15px;
    background-image: url(tile.png)}

This example uses the image's intrinsic size. Note that this is the only possible behavior in CSS level 1 and 2.
body {
    background-size: auto;
    background-image: url(flower.png)}


Ah, although it's only compatible with CSS-compatible web browsers, I'll use it and submit a notice with a hyperlink to the browser required to display the app correctly.

Thank you very much! biggrin.gif I really appreciate it! Dream in code rules!
User is offlineProfile CardPM
+Quote Post

livelonger87
RE: Scaling CSS Backgrounds
17 Oct, 2008 - 04:50 AM
Post #4

New D.I.C Head
*

Joined: 27 May, 2008
Posts: 30


My Contributions
Does anyone know any other method for scaling background images? Only a few browsers support the new CSS background-image principles... sad.gif
User is offlineProfile CardPM
+Quote Post

LoveSquid
RE: Scaling CSS Backgrounds
17 Oct, 2008 - 01:44 PM
Post #5

New D.I.C Head
*

Joined: 14 Oct, 2008
Posts: 34


My Contributions
QUOTE(livelonger87 @ 17 Oct, 2008 - 08:50 AM) *

Does anyone know any other method for scaling background images? Only a few browsers support the new CSS background-image principles... sad.gif


I found this for you: How To: Resizable...
User is offlineProfile CardPM
+Quote Post

livelonger87
RE: Scaling CSS Backgrounds
22 Oct, 2008 - 06:00 AM
Post #6

New D.I.C Head
*

Joined: 27 May, 2008
Posts: 30


My Contributions
I'm still stuck.. sad.gif

I can't seem to wrap my head around scaling techniques - why the fuck can't dam web browsers be consistent and feature image scaling techniques?

I'm also searching for a non-JavaScript solution; completely CSS/HTML.

I need to scale the background-images, for instance; an icon or a header image (I.e. dream-in-code header) or other various areas of a web page to a users browser screen size.

Damn fucking web development.. sad.gif
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 12/5/08 01:58AM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month