it-swarm.com.de

Größe für Hintergrundbild mit CSS festlegen?

Ist es möglich, die Größe des Hintergrundbildes mit CSS einzustellen?

Ich möchte etwas machen wie:

background: url('bg.gif') top repeat-y;
background-size: 490px;

Aber es scheint völlig falsch zu sein, es so zu machen ...

379
Johan

CSS2

Wenn Sie das Bild vergrößern möchten, müssen Sie das Bild selbst in einem Bildeditor bearbeiten.

Wenn Sie das img-Tag verwenden, können Sie die Größe ändern, aber das würde nicht das gewünschte Ergebnis bringen, wenn Sie das Bild als Hintergrund für einen anderen Inhalt benötigen (und es wird sich nicht so wiederholen, wie Sie es zu wollen scheinen) ...

CSS3 die Kräfte entfesseln

Dies ist in CSS3 mit background-size möglich.

Dies wird von allen modernen Browsern unterstützt. Wenn Sie also keine alten Browser unterstützen müssen, können Sie dies auf diese Weise tun.
Unterstützte Browser:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (Webkit 532) und Chrome 3.0+.

.stretch{
/* Will stretch to specified width/height */
  background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
  background-size: 100% 100%;
}

.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
  background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
  background-size: Auto 150px;
}
.resize-fill-and-clip{ 
  /* Resize to fill and retain aspect ratio.
     Will cause clipping if aspect ratio of box is different from image. */ 
  background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
   Will cause gap if aspect ratio of box is different from image. */ 
  background-size: contain;
}

Insbesondere mag ich die Werte cover und contain, die uns neue Kontrollmöglichkeiten geben, die wir vorher nicht hatten.

Runden

Sie können auch background-size: round verwenden, die in Kombination mit repeat eine Bedeutung haben:

.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */ 
  background-size: round auto; /* Height: auto is to keep aspect ratio */
  background-repeat: repeat;
}

Dadurch wird die Bildbreite so angepasst, dass sie mehrmals in den Hintergrundpositionierungsbereich passt.


Zusätzlicher Hinweis
Wenn Sie eine statische Pixelgröße benötigen, ist es dennoch sinnvoll, die Größe des tatsächlichen Bilds physisch zu ändern. Dies dient sowohl dazu, die Qualität der Größenänderung zu verbessern (vorausgesetzt, Ihre Bildsoftware leistet bessere Arbeit als die des Browsers), als auch, um Bandbreite zu sparen, wenn das Originalbild größer ist als das, was angezeigt werden soll.

611
awe

Nur CSS 3 unterstützt das,

background-size: 200px 50px;

Aber ich würde das Bild selbst bearbeiten, so dass der Benutzer weniger laden muss, und es könnte besser aussehen als ein verkleinertes Bild ohne Antialiasing.

330
Maertz

Wenn Ihre Benutzer nur Opera 9.5+, Safari 3+, Internet Explorer 9+ und Firefox 3.6+ verwenden, lautet die Antwort Ja. Ansonsten nein.

Die Hintergrundgröße -Eigenschaft ist Teil von CSS 3, funktioniert aber in den meisten Browsern nicht.

Machen Sie für Ihre Zwecke einfach das eigentliche Bild größer.

23

Nicht möglich . Der Hintergrund wird immer so groß wie möglich sein, aber Sie können verhindern, dass er sich mit background-repeat wiederholt.

_background-repeat: no-repeat;
_

Zweitens wird der Hintergrund nicht in den Randbereich einer Box eingefügt. Wenn Sie also möchten, dass sich der Hintergrund nur auf dem tatsächlichen Inhalt einer Box befindet, können Sie den Rand anstelle des Füllens verwenden.

Drittens können Sie steuern, wo das Hintergrundbild beginnt. Standardmäßig ist es die linke obere Ecke eines Kästchens, aber Sie können dies mit background-position wie folgt steuern:

_background-position: center top;
_

oder vielleicht

_background-position: 20px -14px;
_

Negative Positionierung wird häufig mit CSS-Sprites verwendet.

18
mikl

Nicht zu schwer, wenn du keine Angst hast, ein bisschen tiefer zu gehen :)

Es gibt ein vergessenes Argument:

background-size: contain;

Dadurch wird Ihr background-image nicht gedehnt, wie dies bei cover der Fall wäre. Es würde sich dehnen, bis die längere Seite die Breite oder Höhe des Außenbehälters erreicht und somit das Bild bewahrt.

Bearbeiten: Es gibt auch -webkit-background-size und -moz-background-size.

Die Eigenschaft für die Hintergrundgröße wird in IE9 +, Firefox 4+, Opera, Chrome und Safari 5+ unterstützt.

- Quelle: W3-Schulen

12
kaiser

Mit CSS3 können Sie:

body {
    background-image: url(images/bg-body.png); 
    background-size: 100%; /* size the background image at 100% like any responsive img tag */
    background-position: top center;
    background-repeat:no-repeat;
 }

Dadurch wird die Größe eines Hintergrundbilds auf 100% der Breite des Hauptteils angepasst und der Hintergrund entsprechend angepasst, wenn das Hauptteil für kleinere Auflösungen angepasst wird.

Hier ist das Beispiel: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/

3
Mike Sinkula

hintergrundgröße: 200px 50px ändere es auf 100% 100% und es skaliert auf die Bedürfnisse des Content-Tags wie ul li oder div ... habe es ausprobiert

3
mihai

Zur Unterstützung der Antwort, die @tetra gegeben hat, möchte ich darauf hinweisen, dass, wenn es sich bei dem Bild um eine SVG-Datei handelt, eine Größenänderung des tatsächlichen Bildes nicht erforderlich ist.

Da es sich bei einer SVG-Datei nur um XML handelt, können Sie die gewünschte Größe für die Darstellung in der XML-Datei angeben.

Wenn Sie jedoch dasselbe SVG-Bild an verschiedenen Orten verwenden und unterschiedliche Größen benötigen, ist die Verwendung von background-size sehr hilfreich. SVG-Dateien sind von Natur aus ohnehin kleiner als Rasterbilder, und das Ändern der Größe im laufenden Betrieb mit CSS kann sehr hilfreich sein, ohne dass mir bekannte Performance-Kosten und mit Sicherheit ein geringer bis gar kein Qualitätsverlust entstehen.

Hier ist ein kurzes Beispiel:

<div class="hasBackgroundImage">content</div>

.hasBackgroundImage
{
    background: transparent url('/image/background.svg') no-repeat 10px 5px;
    background-size: 1.4em;
}

(Hinweis: Dies funktioniert unter OS X 10.7 mit Firefox 8, Safari 5.1 und Chrome 16.0.912.63.)

3
SunSparc

Sie müssen nur verschachtelte Divs haben, um browserübergreifend kompatibel zu sein


      <div>
         <div style="background: url('bg.gif') top repeat-y;min-width:490px;">
            Put content here
         </div>
      </div>
   
2
Cornelius Lamb

Sie können zwei <div> -Elemente verwenden:

  • Einer ist ein Container (es ist der, bei dem das Hintergrundbild ursprünglich angezeigt werden soll).

  • Der zweite ist in enthalten. Sie stellen die Größe auf die Größe des Hintergrundbilds ein (oder auf die Größe, die angezeigt werden soll).

Das enthaltene div wird dann so eingestellt, dass es absolute positioniert ist. Auf diese Weise wird der normale Nachrichtenfluss in der enthaltenden div nicht beeinträchtigt.

Damit können Sie Sprite-Bilder effizient verwenden.

2
Ben Shomer

Du hast geschrieben

background: url('bg.gif') top repeat-y;    
background-size: 490px;

der Hintergrund wird jedoch nur in Abhängigkeit von der Größe des Containers angezeigt.

wenn Sie einen leeren Container mit der Hintergrund-URL haben und unabhängig von der Hintergrundgröße, wird das BG.GIF nicht angezeigt.

Wenn Sie die Größe des Behälters auf einstellen

background: url('bg.gif') top repeat-y;    
background-size: 490px;
height: 490px;
width: 490px;

in Kombination mit dem Code, den Sie oben geschrieben haben, können Sie die Datei bg.gif sehen.

1
Carlos Calla
put the below code in the body of you css file

background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;
1
Shwetha S.H

Mit der aktuellen Version von CSS (2.1) können Sie die Größe Ihres Hintergrundbilds nicht festlegen.

Sie können nur Folgendes einstellen: position, fix, image-url, repeat-mode und color.

1
knittl

background-size funktioniert in Chrome 4.1, aber bisher konnte ich nicht dafür sorgen, dass es in Firefox 3.6 funktioniert.

0
silversky

Wenn Sie background-size in derselben background -Eigenschaft festlegen möchten, können Sie Folgendes verwenden:

background:url(my-bg.png) no-repeat top center / 50px 50px;
0
Ratata Tata

Ich verwende Hintergrundbilder für Schaltflächen, aber es wird nur das Bild in der gleichen Größe wie der Text angezeigt, auch wenn ich Breite und Höhe festgelegt habe. Stattdessen fülle ich meinen Text mit &nbsp; -Zeichen aus (nicht unterbrechende Leerzeichen). Grundsätzlich drücke ich so viele, bis der gesamte Schaltflächenhintergrund angezeigt wird. Ich könnte also folgenden Code haben:

Im Stylesheet:

#v2menu-home {
    background-image:url(../v2-siteimages/button.png);
    background-repeat:no-repeat;
}

Im HTML-Dokument:

<div id="v2menu">
    <a id="v2menu-home" href="/index.php">home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div><!-- v2menu -->
0
Martin Thompson

Dies ist in CSS3 mit Hintergrundgröße möglich

.backgroungImage {
    background: url('../imageS/background.jpg') no-repeat;
    background-size: 32px 32px;
}
0
omkar khade

Zum Beispiel:
Hintergrundbild passt immer zur Behältergröße (Breite 100% und Höhe 100px).
Browserübergreifendes CSS:

.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;

}

0
skyrosbit